Redux状态已更新，但不是组件

Question

我在存储和状态更新后更新/重新渲染组件时遇到问题。

1 - 在页面加载时，创建的商店具有空的初始状态，因此所有组件都呈现为空

ViewModel

2 - 然后从API获取数据并使用该数据调度操作。

 store = createStore(Reducers, {}, compose(applyMiddleware(...middleware, thunk), extension)); 

3 - 状态是此处的对象，对象的键是reducers，组件和reducers通过combineReducers组合。因此，当调度getFromServer操作时，它将在所有reducers中被侦听。更新各个reducer中的状态对象。示例reducer如下。

 axios.get(url).then(res => {
  store.dispatch(getFromServer(res.data));
 })

现在我可以看到，首先我的组件处于空状态，然后状态正确更新。组件代码如下：

  import update from 'immutability-helper';
  import * as types from '../actions/constants';
  const initialState = {};
  export default (state = initialState, action) => {
     switch (action.type) {
       case types.GET_FROM_SERVER:
        return update(state,{
            $set:action.schema.database
        })
    case types.SAVE_NAME:
        return { name: action.name };
    default:
        return state;
  }
 };

我可以在这里看到浏览器控制台的状态变化。

prev state和next state显示状态更新。

此外，渲染方法显示this.props.data正在更新。但此处仍未更新静态视图。

我提到的Here状态更新时我做错了吗？

Answer 1

您正在使用componentWillReceiveProps生命周期钩子来捕捉从道具更新组件的时刻：

componentWillReceiveProps(nextProps){
    this.setState({
        tables : this.props.tables
    })
}   

但是，我很确定你想用新道具更新状态

componentWillReceiveProps(nextProps){
  this.setState({
     tables : nextProps.tables
  })
} 

Answer 2

您从tables中提取this.props，从this.state中提取，以便在每次渲染时更新。

render() {
  const {tables} = this.state;

另一件事，你map()个表，所以我认为它是一个数组。所以你应该使用数组而不是对象来初始化它：

自：

this.state = { tables : { }  }

致：

this.state = { tables : [ ]  }