this.setState не обновляет свойство состояния

Question

Я устанавливаю состояние в вызове метода из конструктора, но свойство состояния по-прежнему равно нулю. Некоторая модификация кода дает эту ошибку в консоли,

index.js: 1375 Предупреждение. Невозможно вызвать setState для компонента, который еще не подключен. Это не работает, но это может указывать на ошибку в вашем приложении. Вместо этого присвойте this.state напрямую или определите свойство класса state = {}; с требуемым состоянием в компоненте ResultContainer.

В конструкторе компонентов я вызываю метод. Этот метод в свою очередь вызывает другой метод и пытается заполнить свойство состояния массивом. Я получаю два разных варианта ошибки / предупреждения. В моем коде, если раскомментировать строки в методе рендеринга, я получаю searchAddress - нулевая ошибка. если я оставляю строки как прокомментированные, то в консоли я получаю вышеуказанную ошибку.

На моем методе render() я могу проверить на ноль, и это, конечно, не выдает ошибку и ошибку, но элементы результата не загружаются, независимо от того, что я делаю. этот вопрос, Состояние не меняется после вызова this.setState , кажется несколько уместным, но я не уверен, что смогу перерисовать элемент асинхронно.

import React from 'react';
import ResultItem from './ResultItem'
import AddressService from '../Api/AddressService'

class ResultContainer extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            searchedAddresses : null
        }
        this.intiateSearch();        
    }

    intiateSearch =() => {        
        if(this.props.searchedTerm != null){
            var addressService = new AddressService();

            //this is just getting an items from json for now. i checked and result does contain items
            var result = addressService.searchAddress(this.props.searchedAddresses);            

            //the below line does not seem to work
            this.setState({
                searchedAddresses : result
            });            
        }
    }

    render(){
        return(
            <div className="mt-3">
            <h4>Seaching for postcode - <em className="text-primary">{this.props.searchedTerm}</em></h4>

            <div className="container mt-1">
            {  
                //below gives an error stating searchedAddresses is null 
                // this.state.searchedAddresses.map((address, index)=>{
                //     return(<ResultItem address={address}/>);
                // })

            }
            </div>
            </div>
        );
    }

}

export default ResultContainer;

Answer 1

Вы не должны вызывать функции компонентов внутри метода конструктора, компонент еще не смонтирован на этом этапе, и поэтому ваши функции компонентов еще не доступны для использования здесь. Для того, чтобы обновить ваше состояние. Раньше вы могли использовать метод жизненного цикла componentWillMount, но теперь он считается устаревшим. Вы должны вызывать любой компонент, инициализирующий функции внутри метода жизненного цикла componentDidMount.

Измените свой код так: (Обратите внимание на проверку состояния, изначально равного нулю, в функции рендеринга)

import React from 'react';
import ResultItem from './ResultItem'
import AddressService from '../Api/AddressService'

class ResultContainer extends React.Component{
constructor(props){
    super(props);

    this.state = {
        searchedAddresses : null
    }      
}

componentDidMount() {
    this.intiateSearch();
}

intiateSearch =() => {        
    if(this.props.searchedTerm != null){
        var addressService = new AddressService();

        //this is just getting an items from json for now. i checked and result does contain items
        var result = addressService.searchAddress(this.props.searchedAddresses);            

        this.setState({
            searchedAddresses : result
        });            
    }
}

render(){
    return(
        <div className="mt-3">
        <h4>Seaching for postcode - <em className="text-primary">{this.props.searchedTerm}</em></h4>

        <div className="container mt-1">
        {  
            this.state.searchedAddresses !== null && 
            this.state.searchedAddresses.map((address, index)=>{
                 return(<ResultItem address={address}/>);
             })

        }
        </div>
        </div>
    );
}

}

export default ResultContainer;

Answer 2

Я вижу, что вы вызываете this.intiateSearch ();в конструкторе, который будет вызывать setState для еще не смонтированного компонента.Так почему бы вам не вызвать this.intiateSearch ();внутри жизненного цикла componentDidMount () после монтирования компонента?

componentDidMount() {
   this.intiateSearch();
}