reactjs - 将 getDerivedStateFromProps 更新为功能组件

Question

我正在更新旧的反应组件，并且正在使用getDerivedStateFromProps，我想将类更新为功能组件，但我不确定如何处理这个特定的功能。

static getDerivedStateFromProps(props, state) {
  const oldQuestionsOn = state.questionsOn || {};
  const blankQuestionsOn = fromPairs(
     props.questions.map(({ type, on }) => [type, !!on])
  );
  const questionsOn = { ...blankQuestionsOn, ...oldQuestionsOn };
  return { questionsOn };
}

我用useEffect它作为替代品吗？如果是这样，我该如何获得，state因为它不是它所在组件的状态。

标签： reactjs

Answer 1

您可以将一个函数传递给 setState，该函数将接收最新值作为其参数。您很可能在没有该函数的情况下实现这一点，只需使用 questions 而不是 cur 并调用 setQuestions 而不是 return。如果这段代码没有运行，那是因为 props.questions 没有改变它的引用，你可以.slice()在设置新问题时使用修复它。如果这段代码运行太频繁并且给你带来了一些性能问题，你可以通过记忆问题数组来修复它，搜索useMemo钩子；

useEffect(() => {
  setQuestions((cur) => {
    const oldQuestionsOn = cur || {};
    const blankQuestionsOn = fromPairs(props.questions.map(({type, on}) => [type, Boolean(on)]);
    return { ...blankQuestionsOn, ...oldQuestionsOn };
  })
}, [props.questions])