一、问题描述

封装了一个Chart组件&＃xff0c;它接收一个boolean类型的props&＃xff0c;根据这个boolean的true或false执行不同的操作。经过console.log验证&＃xff0c;onReady函数只会在组件初次渲染时取到props值&＃xff0c;不管后面的props变化成什么都无法重新取值。

二、代码描述

初始化状态为0&＃xff0c;useRequest拿到后端的值为1。

传递给Chart组件的props&＃xff0c;是可以拿到最新的&＃xff0c;可以在40行的打印中看到。

但是onReady挂载的坐标轴点击事件打印出的却不会变化&＃xff0c;依然是0。

// 父组件
import React, { useState, useEffect } from &＃39;react&＃39;;
import { useRequest } from &＃39;ahooks&＃39;;const FatherComponent &＃61; () &＃61;> {const [flag, setFlag] &＃61; useState(0);const { data, loding, run } &＃61; useRequest(async (params) &＃61;> {try {const { data, success, msg } &＃61; awiat getData();if (!success) {return [];}setFlag(data.flag)return data;} catch(e) { console.log(e) };return [];}, { manual: true })useEffect(() &＃61;> {if (!isUndefined(data)) {setFlag(data.flag)}}, [data])return (

{data && }

)
}
export default FatherComponent;// 子组件
import React from &＃39;react&＃39;
import { Column } from "&＃64;ant-design/plots";const ChildChartComponent &＃61; (props) &＃61;> {const { data, flag } &＃61; props;console.log(flag)const config &＃61; {data,// ...many config settings, it&＃39;s unimportantonReady: (plot) &＃61;> {plot.on("axis-label:click", (e) &＃61;> {if (Number(flag) &＃61;&＃61;&＃61; 1) {console.log(&＃39;执行props.flag为true的逻辑&＃39;);} else {console.log(&＃39;执行props.flag为false的逻辑&＃39;);}})}}return ()
}
export default ChildChartComponent;

三、原因解析

这个问题研究了整整一天&＃xff0c;换了很多种方式都寻找不到问题所在。

一开始想是我得状态不对&＃xff0c;再之后是觉得是最新的onReady没有被重新赋值给chart组件。

在官方文档中没找到相关问题描述&＃xff0c;于是乎&＃xff0c;我打开Github进入到组件仓库&＃xff0c;在issues里找Bug和提问&＃xff0c;终于被我找到跟我有相关问题的同志。

原来是因为onReady()函数是一个闭包&＃xff0c;在子组件初次渲染的时候&＃xff0c;它保存的值是初始值0&＃xff0c;所以一直拿不到新状态。

四、修改子组件的写法&＃xff0c;利用useRef解决闭包问题

我们声明一个ref&＃xff0c;在effect中的deps校验规则设置为flag&＃xff0c;effect方法内将ref的current每一次都指向flag。

将onReady中的on方法内的通过flag判断改为通过flagRef.current判断即可。

useRef可以解决闭包问题的原因在于&＃xff1a; useRef 返回的是 { current: null }&＃xff0c;将对应数据赋值给 current&＃xff0c;在声明之后&＃xff0c;引用地址是不变的。

// 子组件
import React, { useRef, useEffect } from &＃39;react&＃39;
import { Column } from "&＃64;ant-design/plots";const ChildChartComponent &＃61; (props) &＃61;> {const { data, flag } &＃61; props;const flagRef &＃61; useRef(null)useEffect(() &＃61;> {flagRef.current &＃61; flag;}, [flag])const config &＃61; {data,// ...many config settings, it&＃39;s unimportantonReady: (plot) &＃61;> {plot.on("axis-label:click", (e) &＃61;> {if (Number(flagRef.current) &＃61;&＃61;&＃61; 1) {console.log(&＃39;执行props.flag为true的逻辑&＃39;);} else {console.log(&＃39;执行props.flag为false的逻辑&＃39;);}})}}return ()
}
export default ChildChartComponent;