时间戳

首页 > 解决方案 > axios调用React后如何强制孩子重新渲染？

reactjs - axios调用React后如何强制孩子重新渲染？

问题描述

我正在处理带有交互式输入的表单。他们必须通过信息将自己实现为父状态。

我使用 Axios 来获取要显示的数据，从外部 API 获取它们。我尝试设置默认值，但它们从未使用较新的值实现。

class Form extends React.Component {
    getData() {
        axios.get('http://xxx/getform/').then(
            res => this.setState(res.data)
        );
    }

    componentDidMount() {
        this.getData();
        setInterval(() => {
            this.getData();
        }, 36000000)
    }

    render() {
        return (
            <div>
                <form>
                    <DatePicker />
                </form>
            </div>
        )
    }
}

class DatePicker extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            selected: new Date(),
            runMin: new Date(),
            runMax: new Date()
        };
    }

    getDate() {
        console.log('DAD');
        try { // if axios didn't finish, to avoid undefined
            this.setState({
                runMin: super.state.RunMin,
                runMax: super.state.RunMax})
        } catch (e) {
            this.setState({
                runMin: new Date(),
                runMax: new Date()})
        }
    }

    componentDidMount() {
        this.getDate();
        this.setState({selected: this.state.runMax});
    }

    render() {
        return (<div></div>);
    }
}

实际上，在 axios 调用之后，孩子们并没有重新渲染。我分离了对 axios 的调用和使用它的组件，因为该Form组件对多个子级进行了一次调用（此处未显示），并且它们读取父级的状态进行渲染。

标签： reactjsaxios

解决方案

首先，您不应该使用访问父母状态super，而是将所需的值作为道具传递

其次，componentDidMount 生命周期在初始挂载时执行，因此当父状态更新时，其中的逻辑不会执行。

处理您的案件的正确方法是

class Form extends React.Component {
    state = {
       RunMin: new Date(),
       RunMax: new Date()
    }
    getData() {
        axios.get('http://xxx/getform/').then(
            res => this.setState({RunMin: res.data.RunMin, RunMax: res.data.RunMax})
        );
    }

    componentDidMount() {
        this.getData();
        setInterval(() => {
            this.getData();
        }, 36000000)
    }

    render() {
        return (
            <div>
                <form>
                    <DatePicker runMin={this.state.RunMin} runMax={this.state.RunMax}/>
                </form>
            </div>
        )
    }
}

class DatePicker extends React.Component {

    render() {
        console.log(this.props.runMin, this.props.runMax);
        return (<div></div>);
    }
}

推荐阅读