Redux 状态已更新，但组件未更新答案

【问题标题】：Redux state is updated but not the componentRedux 状态已更新，但组件未更新
【发布时间】：2018-05-01 12:03:06
【问题描述】：

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

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

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

2- 然后从 API 获取数据，并使用该数据分派操作。

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

3- 这里的状态是一个对象，对象的键是reducer，组件和reducer通过combineReducers.so组合，所以当getFromServer动作被调度时，它会在所有reducers中被监听。并更新状态各个reducer中的对象。reducer示例如下。

  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;
  }
 };

现在我可以看到一开始我的组件状态为空，然后状态正确更新。组件代码如下：

 import React, { Component } from 'react';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import Table from '../containers/Table';
 @observer class Tables extends Component {'
   props: Props
   constructor(props) {
    super(props);
    this.state = { tables : { }  }
}
componentWillMount(){
    this.setState({
        tables : this.props.tables
    })
}
componentWillReceiveProps(nextProps){
    this.setState({
        tables : this.props.tables
    })
}   

render() {
    var {tables} = this.props;
    console.log(tables);
    return (
        <div className='table-wrapper'>
            { tables.map((table) => (
                <div key={ table.id }>{
                <Table
                    key={ table.id }
                    data={ table }                        
                />)</div>
            ))}                
        </div>
    );
}
}

type Props = {
  tables: Array<TableType>    
};

export default Tables;

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

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

还有显示 this.props.data 正在更新的渲染方法。但是这里仍然没有更新视图。

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

【问题讨论】：

能不能把没有更新的组件的代码加进去？
你的组件可能没有监听状态变化
我已经更新了我的问题并添加了组件。你可以在那里看到 console.log(tables)。这表明在状态更改组件被调用并且表数据被更新但组件未被重新渲染.

标签： javascript reactjs redux react-redux immutability

【解决方案1】：

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

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

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

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

【讨论】：

我在这个问题上头疼了 2 天。thanx 伙计。这很有用。我认为这一定是一个不变性问题，但我 wsnt.thanx。
当然:) 也只是学习 React。在 Vue.js 之后，它似乎变得更加复杂。
@N.A，你能批准我的回答吗？

【解决方案2】：

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

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

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

发件人：

this.state = { tables : { }  }

收件人：

this.state = { tables : [ ]  }

【讨论】：

Aaaa 和 @Yevhenii Herasymchuk 刚才所说的。
this.state 未显示更新，但 this.prop 显示