Question

我是相对较新的响应者，正在尝试将redux用作我的应用程序的中央状态存储。我的问题是，当我获取数据并将数据成功添加到存储中后，我的组件没有更新。在下面的示例中，loading始终显示在页面上。对store.getState().schools的调用返回了由console.log语句验证的3个对象组成的数组。我该如何克服？

组件：

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

Answer 1

您遇到的问题是，导出的组件应连接到redux存储

export default connect(mapStateToProps)(SchoolsContainer);

然后您可以通过组件属性访问redux状态对象，而不是直接引用存储对象，如下所示：

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

填充Redux存储后React组件未更新

1 个答案: