反應-異步修改道具

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這樣的東西才能工作