Блог

Главная - Вопросы по программированию - Компонент React не обновляется после заполнения хранилища redux

Компонент React не обновляется после заполнения хранилища redux

#reactjs #redux #react-redux

#reactjs #redux #реагировать-redux

Вопрос:

Я относительно новичок в react и пытаюсь использовать redux в качестве центрального хранилища состояния для своего приложения. Моя проблема в том, что когда я извлекаю данные и после того, как данные успешно добавлены в хранилище, мой компонент не обновляется. В приведенном ниже примере 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 amp;amp; 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. Ваш класс должен быть подключен к redux с помощью connect()

2. @EranGoldin Я обновил свой пост, как было предложено (я считаю, что это способ сделать это), и происходит то же самое поведение

3. amp;amp; store.getState().length выглядит неправильно. я думаю, вам не хватает свойства schools в этом состоянии? store.getState().schools. длина>0. И вы должны получить доступ к объекту state через реквизиты компонента вместо объекта store

4. @jure проблемой был доступ к schools через props, а не непосредственно из хранилища redux. если вы хотели бы опубликовать это в качестве ответа, я с радостью приму, и да, при проверке if также отсутствовало свойство schools

5. @GregH приятно, что у вас все работает, я опубликовал ответ

Ответ №1:

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

 export default connect(mapStateToProps)(SchoolsContainer);

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

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