东台网站建设找哪家好,做相关性分析的网站,广西桂建云个人登录,装修公司简介一、问题描述封装了一个Chart组件#xff0c;它接收一个boolean类型的props#xff0c;根据这个boolean的true或false执行不同的操作。经过console.log验证#xff0c;onReady函数只会在组件初次渲染时取到props值#xff0c;不管后面的props变化成什么都无法重新取值。二、…一、问题描述封装了一个Chart组件它接收一个boolean类型的props根据这个boolean的true或false执行不同的操作。经过console.log验证onReady函数只会在组件初次渲染时取到props值不管后面的props变化成什么都无法重新取值。二、代码描述初始化状态为0useRequest拿到后端的值为1。传递给Chart组件的props是可以拿到最新的可以在40行的打印中看到。但是onReady挂载的坐标轴点击事件打印出的却不会变化依然是0。// 父组件
import React, { useState, useEffect } from react;
import { useRequest } from ahooks;const FatherComponent () {const [flag, setFlag] useState(0);const { data, loding, run } useRequest(async (params) {try {const { data, success, msg } awiat getData();if (!success) {return [];}setFlag(data.flag)return data;} catch(e) { console.log(e) };return [];}, { manual: true })useEffect(() {if (!isUndefined(data)) {setFlag(data.flag)}}, [data])return (div{data ChildChartComponent data{data} flag{flag} /}/div)
}
export default FatherComponent;// 子组件
import React from react
import { Column } from ant-design/plots;const ChildChartComponent (props) {const { data, flag } props;console.log(flag)const config {data,// ...many config settings, its unimportantonReady: (plot) {plot.on(axis-label:click, (e) {if (Number(flag) 1) {console.log(执行props.flag为true的逻辑);} else {console.log(执行props.flag为false的逻辑);}})}}return (Column {...config} /)
}
export default ChildChartComponent;三、原因解析这个问题研究了整整一天换了很多种方式都寻找不到问题所在。一开始想是我得状态不对再之后是觉得是最新的onReady没有被重新赋值给chart组件。在官方文档中没找到相关问题描述于是乎我打开Github进入到组件仓库在issues里找Bug和提问终于被我找到跟我有相关问题的同志。原来是因为onReady()函数是一个闭包在子组件初次渲染的时候它保存的值是初始值0所以一直拿不到新状态。四、修改子组件的写法利用useRef解决闭包问题我们声明一个ref在effect中的deps校验规则设置为flageffect方法内将ref的current每一次都指向flag。将onReady中的on方法内的通过flag判断改为通过flagRef.current判断即可。useRef可以解决闭包问题的原因在于 useRef 返回的是 { current: null }将对应数据赋值给 current在声明之后引用地址是不变的。// 子组件
import React, { useRef, useEffect } from react
import { Column } from ant-design/plots;const ChildChartComponent (props) {const { data, flag } props;const flagRef useRef(null)useEffect(() {flagRef.current flag;}, [flag])const config {data,// ...many config settings, its unimportantonReady: (plot) {plot.on(axis-label:click, (e) {if (Number(flagRef.current) 1) {console.log(执行props.flag为true的逻辑);} else {console.log(执行props.flag为false的逻辑);}})}}return (Column {...config} /)
}
export default ChildChartComponent;
