Question

我正在处理具有交互式输入的表单。他们必须将信息变成父母的状态。

我使用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组件对多个子对象（此处未显示）进行了一次调用，并且它们读取了要渲染的父对象的状态。

Answer 1

首先，您不应使用super访问父级状态，而应将所需的值作为props传递

第二，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>);
    }
}

Answer 2

您设置状态的方式不正确

更改

   this.setState(res.data);

收件人

 this.setState({data: res.data});

您需要将响应设置为组件中具有的状态字段，并确保将数据传递给子组件

在React中的axios调用之后，如何强制孩子重新渲染？

2 个答案: