Question

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

以下代码应解释我如何执行此操作。 media道具是一个包含数据的对象。我已经在父元素中拥有此数据，因此在此处设置值很好，并且它们可以顺利通过。但是，一旦页面加载完毕，init的第三个useReducer参数就不会再触发，因此无法用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类型的事件类似。因此，以下代码使我可以检查道具（media）的状态，然后调度一个动作来设置我的redux状态。

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

  })

感谢@sliptype向我指出正确的方向

Answer 2

将道具复制到状态被认为是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

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

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

2 个答案: