Как заставить детей пересматривать после вызова axios в React?

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 и вместо этого передавать требуемое значение в качестве реквизита

Во-вторых, жизненный цикл 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});

Вам необходимо установить ответ на имеющееся у вас поле состоянияв компоненте и убедитесь, что вы передаете данные дочернему компоненту