0

我有两个组件。

function Parent(props){

  const handleClick = () => {
   console.log(props.stateA);
  };

  return <div><Child text={stateB} handleClick={handleClick} /></div>
}

const mapStateToProps = (state) => {
  return {
    stateA: state.stateA // stateA will be changed somewhere else
    stateB: state.stateB
  }
};

export default connect(mapStateToProps)(Parent);

function Child(props) {
   return <div onClick={props.handleClick}>{props.text}</div>
}

export default React.memo(Child,(prev, next) => {
   return prev.text === next.text
});

我的问题是当 stateA 在某处更改时，单击Child将记录以前的 stateA。我无法访问最新的 stateA。

你可以看到，我不想Child在 stateA 改变时重新渲染，它应该只在 stateB 改变时重新渲染。但是我想在Parent点击时访问最新的 stateA Child。

有什么方法可以解决这个问题吗？

4

2 回答 2

0

你应该可以访问props.stateA没有问题

const handleClick = () => {
   console.log(props.stateA);
};

因为您在handleClick. 所以如果props.stateA是陈旧的，那么合乎逻辑的结论是父母没有收到最新的道具。我们可以看看你是如何更新道具/状态的吗？

于 2020-09-29T15:52:40.410 回答
0

如果Parent组件是功能组件，那么您可以像这样使用

 const [valueA, setValueA] = useState('')
 useEffect(() => {
      setValueA(props.stateA)
 },[props.stateA])

 console.log(valueA) // latest Value of stateA
 return <div><Child text={stateB} handleClick={handleClick} /></div>

我希望它对你有用。

于 2020-09-29T15:36:13.823 回答