React userReducer 初始化函数不会在道具更新时触发

Question

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

下面的代码应该可以解释我是如何做到这一点的。 media 属性是一个包含数据的对象。我已经在父元素中拥有此数据，因此在此处设置值很好，它们可以毫无问题地通过。但是，一旦页面加载完毕，useReducer 的第 3 个 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 hooks 功能并保持组件功能允许我使用 useEffects() 这类似于使用 componentDidUpdate 类型的事件。所以下面的代码允许我检查道具的状态（media），然后发送一个设置我的 redux 状态的动作。

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

  })

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

Answer 2

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

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

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

Alternative 1: To reset only certain state fields, watch for changes in a special property (e.g. props.userID).

这是备选方案，而不是建议。

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

希望本文 link 能为您提供有关该主题的更多信息，其中的建议对未来的工作有所帮助。

React userReducer 初始化函数不会在道具更新时触发

React userReducer init function not triggering on props update

state

reducers

reactjs