时间戳

首页 > 解决方案 > React - 异步修改 props

javascript - React - 异步修改 props

问题描述

通过使用 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 ) }

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

标签： javascriptreactjsasynchronous

解决方案

如果你使用 redux，你更新 state 的方式应该是发送一个 action 到你的 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 这样的东西才能工作

推荐阅读