Question

我正在从构造函数的方法调用中设置状态，但是state属性仍然为null。在代码上进行一些修改会导致控制台中出现此错误，

index.js：1375警告：无法在尚未安装的组件上调用setState。这是一项禁止操作的操作，但可能表明您的应用程序中存在错误。而是直接分配给this.state或在ResultContainer组件中定义具有所需状态的state = {};类属性。

在我的组件构造函数中，我正在调用一个方法。该方法又调用另一种方法，并尝试使用数组填充state属性。我得到两种不同的错误/警告变体。在我的代码中，如果取消注释，我得到的render方法中的行searchedAddress为null错误。如果我将行保留为注释，则在控制台中会出现上述错误。

在我的render()方法上，我可以检查是否为空，并且当然不会抛出错误，但是无论我做什么，结果项都不会被加载。这个问题，State not changing after calling 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

我看到您正在调用this.intiateSearch（）;在构造函数中，它将在尚未安装的组件上调用setState。那么，为什么不调用this.intiateSearch（）;？组件安装后在componentDidMount（）生命周期内？

componentDidMount() {
   this.intiateSearch();
}

Answer 2

您不应该在构造函数方法内调用组件函数，因为此时组件尚未安装，因此尚不能在此处使用您的组件函数。为了更新您的状态。您曾经可以使用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;

this.setState不更新状态属性

2 个答案: