Состояние Redux обновлено, но не компонент - PullRequest
Новая
       24

Состояние Redux обновлено, но не компонент

0 голосов
/ 01 мая 2018

У меня проблема с обновлением / повторным рендерингом компонента после сохранения и обновления состояния.

1- При загрузке страницы создается хранилище с пустым начальным состоянием, поэтому все компоненты отображаются с пустым 

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

2- Затем принимаются данные из API и с этими данными отправляется действие. 

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

3- состояние - это здесь объект, а ключи объектов - это редукторы, а компоненты и редукторы объединяются через integraReducers . Поэтому, когда отправляется действие getFromServer, оно прослушивается во всех редукторах. и обновляет объект состояния в соответствующем редукторе. Пример редуктора следующий. 

  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;

Здесь можно увидеть изменение состояния в консоли браузера.

enter image description here

предыдущее состояние и следующее состояние показывает обновление состояния.

Также метод рендеринга, показывающий, что this.props.data обновляется. Но представление по-прежнему здесь не обновляется.

Я делаю что-то не так при обновлении состояния, как упоминалось Здесь ?

Ответы [ 2 ]

0 голосов
/ 01 мая 2018

Вы извлекаете tables из this.props, извлекаете его из this.state, чтобы он обновлялся при каждом рендере. 

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

Другое дело, вы map() таблицы, поэтому я предполагаю, что это массив. Поэтому вы должны инициализировать его массивом вместо объекта:

От: 

this.state = { tables : { }  }

Кому: 

this.state = { tables : [ ]  }
0 голосов
/ 01 мая 2018

Вы используете хук жизненного цикла componentWillReceiveProps для ловли момента обновления компонента из реквизита: 

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

Но я почти уверен, что вы хотели обновить состояние новыми реквизитами 

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