React -异步修改道具

Question

通过使用Redux，我的组件在props中接收数据数组。我的目标是一旦组件拥有这些数据点，就异步修改它们，如下所示：

componentWillReceiveProps(newProps) {
   newProps.myData.forEach ( d => {
       axios.get(....).then (res => { d.property = res.data) });
   })
}

我还使用react-bootstrap-table-2来显示this.props.myData。但是，更新永远不会反映在表中。如果我同步地改变它，比如

componentWillReceiveProps(newProps) { newProps.myData.forEach( d => d.property = 1 ) }

然后，它将显示在表中。如何实现异步更新？

Answer 1

如果你使用的是redux，你更新状态的方式应该是向你的reducer发送一个动作。您可以向组件提供dispatch，然后通过调用dispatch(updateTable(newData)调用您的操作，从而将操作分派给缩减程序

// tableActions.js
function updateTable(newData) {
  return {
     type: 'UPDATE_TABLE',
     newData: newData
  }
}

// tableReducer.js

function tableReducer(state = initialState, action) {
  switch (action.type) {
    case UPDATE_TABLE:
      return Object.assign({}, state, {
        tableData: action.newData
      })
    default:
      return state
  }
}

你需要像redux thunk这样的东西才能正常工作。