React userReducer init 函数不会在道具更新时触发

Question

我有一个组件，它是一种用于在我的数据库中创建记录的表单。 我还希望能够将值传递到这个组件中来填充表单，然后允许我更新我现有的数据库记录。 来自同一组件的直接添加/编辑功能。

下面的代码应该解释我是如何做到这一点的。 media道具是一个包含数据的对象。 我在父元素中已经有了这些数据，所以在这里设置值很好，它们可以毫无问题地通过。 然而，一旦页面被加载， useReducer的第三个init参数永远不会重新触发，因此我的状态不能被media道具中传递的值覆盖。 当道具更新时，是否有正确的方法使init函数触发，或者我的问题是架构问题？

const MediaUploadForm = ({ media }) => {

  const init = (initialState) => {

    if (media) {
      // ... here I extract the values I need and override the initialState where required 
    } else {
      return initialState
    }
  }

  const [formState, dispatch] = useReducer(
    MediaFormReducer,
    initialState,
    init
  )

Answer 1

所以使用新的 React 钩子特性并保持组件功能允许我使用useEffects()这类似于使用componentDidUpdate类型事件。 因此，下面的代码允许我检查 prop ( media ) 的状态，然后调度一个设置我的 redux 状态的操作。

useEffect(() => {
    if (media && id !== media.id) {
      dispatch(loadMedia(media))
    }

  })

感谢@sliptype 为我指明了正确的方向

Answer 2

将 props 复制到 state 中被认为是 React 中的一种反模式。 正如您所见，道具更改不会触发重新初始化状态。

这在https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html 中有描述。

从回顾来看，当前建议的解决方案似乎匹配

备选方案 1：要仅重置某些状态字段，请注意特殊属性（例如 props.userID）的变化。

这是一个替代方案，而不是建议。

https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recap

希望此链接为您提供有关该主题的更多信息，以及那里的建议对未来工作有所帮助。