Javascript 在Redux中更新子组件时遇到问题

我正在构建一个简单的CRUD note应用程序，在创建和删除便笺的简单POST和DELETE api调用之后，我在更新子组件时遇到了问题

这是一个带有简单表单的父组件和一个子组件，用于呈现提交的注释

class AuthenticatedHomeView extends Component {
  _handleSubmit(e) {
    e.preventDefault()
    const { dispatch } = this.props
    const data = {
      title: this.refs.title.value,
      description: this.refs.description.value,
      private: this.refs.private.checked
    }
    dispatch(Actions.createNotepad(this.props.currentUser.id, data))
    this._resetForm()
  }

  _resetForm() {
    this.refs.title.value = ''
    this.refs.description.value = ''
    this.refs.private.checked = true
  }

  render() {
    return (
      <div>
        <form onSubmit={::this._handleSubmit}>
          {/* form removed for clarity */}
        </form>
        <NotepadsShowView/>
      </div>
    )
  }
}

以下是操作创建者：

const Actions = {
  createNotepad: (userId, data) => {
    return dispatch => {
      httpPost(`/api/v1/users/${userId}/notepads`, {data: data})
      .then(data => {
        dispatch({
          type: CONSTANTS.NOTEPADS_CREATED,
          notepad: data
        })
      })
      .catch(error => {
        error.response.json()
        .then(json => {
          dispatch({
            type: CONSTANTS.NOTEPADS_CREATE_ERROR,
            errors: json.errors,
          })
        })
      })
    }
  },

  fetchNotepads: (userId) => {
    return dispatch => {
      dispatch({
        type: CONSTANTS.NOTEPADS_FETCHING
      })

      httpGet(`/api/v1/users/${userId}/notepads`, {id: userId})
      .then(data => {
        dispatch({
          type: CONSTANTS.NOTEPADS_RECEIVED,
          notepads: data.notepads
        })
      })
      .catch(error => {
        error.response.json()
        .then(json => {
          dispatch({
            type: CONSTANTS.NOTEPADS_ERRORS,
            errors: json.error
          })
        })
      })
    }
  },

  deleteNotepad: (userId, notepadId) => {
    return dispatch => {
      httpDelete(`api/v1/users/${userId}/notepads/${notepadId}`, {id: notepadId})
      .then(data => {
        dispatch({
          type: CONSTANTS.NOTEPADS_OWNED_DELETE,
          id: notepadId
        })
      })
    }
  },
}

这是减速器：

const initialState = {
  ownedNotepads: [],
  fetching: true,
}

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case CONSTANTS.NOTEPADS_FETCHING:
      return {
        ...state,
        fetching: true,
      }
    case CONSTANTS.NOTEPADS_RECEIVED:
      return {
        ...state,
        fetching: false,
        ownedNotepads: action.notepads
      }
    case CONSTANTS.NOTEPADS_CREATED:
      return {
        ...state,
        ownedNotepads: [
          ...state.ownedNotepads,
          {
            id: action.id,
            title: action.title,
            description: action.description,
            private: action.private
          }
        ]
      }
    case CONSTANTS.NOTEPADS_OWNED_DELETE:
      const index = state.ownedNotepads.findIndex(note => note.id === action.id)
      return {
        ...state,
        ownedNotepads: [
          ...state.ownedNotepads,
          state.ownedNotepads.slice(0, index),
          state.ownedNotepads.slice(index + 1)
        ]
      }
    default:
      return state
  }
}

用户提交一个新记事本，该记事本将触发POST api调用。服务器返回新的记事本，reducer将记事本添加到Redux状态。这里没有问题。但是，当创建记事本时，记事本道具未定义，并且在子UI组件中未显示新记事本。他们不知道更新，我想这是因为我没有处理状态更新

我正在使用上面的

componentWillMount

（

cWM

）在初始渲染之前获取更新的记事本状态。我假设我应该使用

componentWillReceiveProps

，但我知道如果我分派

fetchnotepad

操作，将会有一个无限循环，因为

cWM

中的分派将再次运行

---

我的问题是，当Redux状态更改时，如何更新组件道具？我必须使用组件状态吗？生命周期方法如何？

发布相关操作和代码。你在用什么？看起来这些东西应该在动作创造者中。我对异步服务器thunks不太熟悉，所以很遗憾我不能给出答案，但我认为这是你的问题。好的，我会尽快更新这个问题。我在用thunk。好的，它已经更新了。你从代码中复制粘贴了这个吗？您能否验证添加便笺确实在更新您的redux存储？我在创建的

记事本中看到动作数据与减速机不匹配。在您的操作中，您正在以
{type:…，notepad:data}
的形式传递数据，而您的reducer正在尝试以
action.id，action.title
的形式访问数据，它应该是
action.notepad.id，action.notepad.title
…您完全正确！好眼力。伙计，我是怎么看的。有趣的是，只有在我刷新页面后，减速机才能工作。奇怪的发布您的相关操作和代码。你在用什么？看起来这些东西应该在动作创造者中。我对异步服务器thunks不太熟悉，所以很遗憾我不能给出答案，但我认为这是你的问题。好的，我会尽快更新这个问题。我在用thunk。好的，它已经更新了。你从代码中复制粘贴了这个吗？您能否验证添加便笺确实在更新您的redux存储？我在创建的
记事本中看到动作数据与减速机不匹配。在您的操作中，您正在以
{type:…，notepad:data}
的形式传递数据，而您的reducer正在尝试以
action.id，action.title
的形式访问数据，它应该是
action.notepad.id，action.notepad.title
…您完全正确！好眼力。伙计，我是怎么看的。有趣的是，只有在我刷新页面后，减速机才能工作。奇怪的
const initialState = {
  ownedNotepads: [],
  fetching: true,
}

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case CONSTANTS.NOTEPADS_FETCHING:
      return {
        ...state,
        fetching: true,
      }
    case CONSTANTS.NOTEPADS_RECEIVED:
      return {
        ...state,
        fetching: false,
        ownedNotepads: action.notepads
      }
    case CONSTANTS.NOTEPADS_CREATED:
      return {
        ...state,
        ownedNotepads: [
          ...state.ownedNotepads,
          {
            id: action.id,
            title: action.title,
            description: action.description,
            private: action.private
          }
        ]
      }
    case CONSTANTS.NOTEPADS_OWNED_DELETE:
      const index = state.ownedNotepads.findIndex(note => note.id === action.id)
      return {
        ...state,
        ownedNotepads: [
          ...state.ownedNotepads,
          state.ownedNotepads.slice(0, index),
          state.ownedNotepads.slice(index + 1)
        ]
      }
    default:
      return state
  }
}