Question

class CompTable extends React.Component{

constructor(props){
    super(props);
    this.state = {
        products: [],
        attributes: [],
        attDesc: [],
    };
    this.getEntries = this.getEntries.bind(this);
}

getEntries = async () => {
    const response = await fetch('/api/hello/data');
    const body = response.json();
    return body;
};

componentDidMount(){
    this.getEntries()
        .then((resolve) => this.setState({
            products: resolve.products, 
            attributes: resolve.attributes, 
            attDesc: resolve.attributesDescription}))
        .catch(err=>console.log(err));
};


render(){

    let obj = this.state.products[1].attributes;
    console.log(obj);


    return(
        <div id = "comp">    
            <CompHeading comp={this.state.products}/> 
        </div>
    );    
}


}

export default CompTable;

第let obj = this.state.products.attributes行返回上述错误。令人惊讶的是，如果我删除“ .attributes”，则控制台会记录产品对象，其中包含“ attributes”属性。当我尝试访问其属性XD时，似乎该对象刚刚消失了。有人知道原因吗？

另一个奇怪的事情是，当我删除“ .attributes”时，浏览器的控制台会记录六个对象（尽管我只调用console.log一次）-其中四个对象未定义，而两个对象都是正确的产品[ 1]对象。

Answer 1

不信任console.log，它不准确。它的价值可以改变。要解决此问题，可以在要记录的对象上使用JSON.stringify，以在记录对象时显示其实际值。

对于您的问题，您可以执行以下操作：

if (!this.state.products[1]?.attributes) return <Loader />
else 
   return (... your content...);

这样，您将在数据不可用时呈现Loader。

Answer 2

您甚至在尝试填充this.state.products[1].attributes之前都在尝试访问它。

它从componentDidMount填充，它将在执行render函数之后运行。

我们需要将render函数变量声明更改为-：

let obj = this.state.products.length > 0 && this.state.products[1].attributes;
console.log(obj);

这样，它将在第一遍中获得未定义的值。在第二遍中，当从setState调用componentDidMount时，它将获得正确的值，并且您的代码不会中途中断。

TypeError：无法读取未定义的属性“属性”

2 个答案: