javascript - React.JS - 子组件在接收 Prop 时不更新(功能组件)

Question

我的应用程序中有一个更高阶的功能组件，它将 JSON 传递给它的子组件。我正在使用 React Hooks 来管理状态。我无法使用 componentDidUpdate 因为这不是类组件。

我使用 useEffect() 让它在初始渲染时处理 JSON，但之后我似乎无法让它更新。我已经确认 PROPS 确实正在发生变化，并且 JSON 是唯一的(它会在单击按钮时发生变化)。

这是我的代码:

function FormSection(props) {
    const [questions, updateQuestions] = useState([]);
    const [sectionJSON, updateSectionJSON] = useState(props.json);

    const fetchQuestionsData = json => {
       /* API CALL TRANSFORM JSON INTO HTML FOR USE ELSEWHERE IN THE APP */
    };

    useEffect(() => {
        fetchQuestionsData(sectionJSON);
    }, [sectionJSON]);

    ...

}

我还尝试更改 useEffect() Hook 以直接使用 props:

    useEffect(() => {
        fetchQuestionsData(props.json);
    }, [props.json]);

父组件调用它的方式如下:

    <FormSection key={i} json={newJSON} />

我是否遗漏了一些明显的东西？

Answer 1

当你设置时，

const [sectionJSON, updateSectionJSON] = useState(props.json);

相当于，

constructor(props){
   super(props);
   this.state = {
      sectionJSON: props.json
   }
}

因此，您的 sectionJSON 将仅设置一次，并且 props.json 中的任何后续更改都不会更改 sectionJSON。

因此这只会执行一次，并且在 props.json 更改时不会执行

useEffect(() => {
    fetchQuestionsData(sectionJSON);
}, [sectionJSON]);

要实现此功能，您需要将 props.json 传递到 useEffect Hook ，

useEffect(() => {
   fetchQuestionsData(props.json);
}, [props.json]);

这样做不会重新渲染您的组件，因为您的组件的 state 没有改变，就像我们在基于类的组件中使用 componentDidUpdate 一样，因此您应该设置您的组件fetchQuestionsData 中的状态如下:

const fetchQuestionsData = json => {
   /* API CALL TRANSFORM JSON INTO HTML FOR USE ELSEWHERE IN THE APP */
   updateSectionJSON(json);   //This will re-render your component.
};