6

我想在父组件中更改道具后在子组件中执行一个函数，而不必在子/父中管理额外的状态。

<ParentCompoenent 
  myCallback={() => {}}
  myList={['a','b','c']}
/>

ChildComponent.js

componentWillReceiveProps(nextProps) {
  console.log(this.props.myList, '==', nextProps.myList);  // Outputs ['a','b','c'] == ['a','b','c']
}

当我试图控制 componentWillReceiveProps 中的 nextProps 时，即使在道具已更改后，它每次都会给出相同的结果。

4

2 回答 2

14

你必须componentDidUpdate在类组件和useEffect函数组件中使用......

componentDidUpdate像这样：

    componentDidUpdate(prevProps, prevState) {
            if (prevProps.something !== this.props.something) {
                   console.log('something prop has changed.')
            }
    }

componentDidUpdate每次console.log新道具不同于prevProps.

并且useEffect您只需将道具添加到其依赖项中：

useEffect(()=>{
    console.log('something prop has changed.')
},[props.something]);

useEffect每次该道具的值发生变化时都会调用该函数。

于 2021-02-08T08:29:18.177 回答
0

不确定您的问题与 react redux 有什么关系，但这里的代码没有显示您描述的行为（您在问题中发布的代码没有任何问题）。请提供您的问题的最小可重现示例。

class ChildComponent extends React.Component {
  componentWillReceiveProps(nextProps) {
    console.log(this.props.myList, '==', nextProps.myList); // Outputs ['a','b','c'] == ['a','b','c']
  }
  render() {
    return (
      <pre>
        {JSON.stringify(this.props.myList, undefined, 2)}
      </pre>
    );
  }
}
const ParentCompoenent = () => {
  const [myList, setMyList] = React.useState([1, 2, 3]);
  const changeList = React.useCallback(
    () => setMyList((list) => list.concat(list.length + 1)),
    []
  );
  return (
    <div>
      <button onClick={changeList}>Change list</button>
      <ChildComponent myList={myList} />
    </div>
  );
};

ReactDOM.render(
  <ParentCompoenent />,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

您应该避免使用 componentWillReceiveProps 并且可能使组件成为功能组件并使用useEffect挂钩或使用确实安装、更新并可能会卸载类组件。

于 2021-02-08T08:10:28.360 回答