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

希望此鏈接為您提供有關該主題的更多信息，以及那里的建議對未來工作有所幫助。