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()挂钩更改为直接使用道具：

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

父componenet对其进行如下调用：

    <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钩子，

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

这样做不会重新渲染您的组件，因为您的组件的state并没有发生变化，就像我们在基于类的组件中使用componentDidUpdate一样，因此您应该在{{1}中设置状态}，

fetchQuestionsData

React.JS-接收道具（功能组件）时，子Componenet不更新

1 个答案: