反应.JS - 接收道具(功能组件)时子组件未更新

Question

我的应用程序中有一个更高阶的功能组件，它将JSON传递给它的子组件。我正在使用反应钩子来管理状态。我不能使用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]);

父公司调用它如下：

<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一样，所以你应该fetchQuestionsData设置你的状态，比如，

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