Реактивный компонент не обновляется после заполнения избыточного хранилища - PullRequest
Новая
       3

Реактивный компонент не обновляется после заполнения избыточного хранилища

2 голосов
/ 28 марта 2019

Я относительно новичок, чтобы реагировать, и я пытаюсь использовать избыточность в качестве центрального хранилища данных для моего приложения.Моя проблема в том, что когда я получаю данные и после того, как данные успешно добавляются в хранилище, мой компонент не обновляется.В приведенном ниже примере loading всегда отображается на странице.вызов store.getState().schools возвращает массив из 3 объектов, что подтверждается оператором console.log.Как я могу преодолеть это?

Компонент: 

export default class SchoolsContainer extends Component {
    displayName = SchoolsContainer.name;

    constructor(props){
        super(props);
    }

    componentDidMount = () => {
        axios.get('https://localhost:44398/api/schools')
            .then(response => {
                response.data.forEach(school => {
                    store.dispatch(addSchool(school));
                })
                console.log(store.getState().schools);
                console.log(this.props.schools);
            })
            .catch(err => {
                console.log("err", err);
            });
    };

    render(){
        if(this.props.schools != null && this.props.schools.length > 0) {
            return <Schools schools={store.getState().schools} />
        }
        else{
            return (<div>loading</div>);
        }
    }
}

const mapStateToProps = function(state) {
    return {
      schools: state.schools
    }
}

export default connect(mapStateToProps)(SchoolsContainer);

1 Ответ

2 голосов
/ 28 марта 2019

У вас проблема в том, что ваш экспортированный компонент должен быть подключен к хранилищу резервов 

export default connect(mapStateToProps)(SchoolsContainer);

И затем вы можете получить доступ к объекту избыточного состояния через реквизиты компонента, вместо прямой ссылки на объект хранилища, например: 

if(this.props.schools != null && this.props.schools.length > 0) {
        return <Schools schools={this.props.schools} />
    }
...