Question

import React from 'react';

import AttributeDescription from './AttributeDescription';

class CompEntry extends React.Component{

render(){

    let description;

    if(this.props.description.startsWith("_")){
        description= this.props.description.slice(1, this.props.description.length);
    }
    if(this.props.description.startsWith("__")){
        description = this.props.description.slice(2, this.props.description.length);
    }

    return(
        <div>
            <div>
                <AttributeDescription description={description}/>
            </div>
        </div>
    );
};
}
export default CompEntry;

如果我在退货前做东西，就会发生上述错误。但是，如果我在return之前不做任何事情，只是将this props.description传递到description prop标签的<AttributeDescription/>中，则一切正常，将定义的道具传递到标签中。如果我尝试访问其属性，似乎this.props.description的值不存在。有人知道为什么吗？

这就是我使用上面的CompEntry组件的方式：

import React from 'react';
import CompEntry from './CompEntry';
import CompHeading from './CompHeading';

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(){
    console.log(this.state.products);
    let highlightEntry= true;
    let compEntries = this.state.attributes.map( (item, index) =>{
       highlightEntry = !highlightEntry; 

       return(
           <CompEntry key={index} attribute={item} description={this.state.attDesc[index]} comparees={this.state.products} color={highlightEntry}/>            
       );
    });

    return(
        <div id = "comp-table">
            <div id="comp-sub-container">   
                <CompHeading comparees={this.state.products}/> 
                {compEntries}
            </div>
        </div>  
    );
}


}

export default CompTable;

Answer 1

编辑：如@ awarrier99在评论中所述，response.json()函数返回一个Promise，因此您需要适当地处理它。下面的代码也为此进行了更新。

如果前导字符不是下划线，则请勿将description设置为任何值。同样，如果它以两个下划线开头，那么它也以一个下划线开头，这样可以使工作加倍。我建议这样做：

render(){
  let description = this.props.description;

  if (description.startsWith("__")) {
    description = description.slice(2, description.length);
  } else if (description.startsWith("_")) {
    description= description.slice(1, description.length);
  }

  return(
    <div>
      <div>
        <AttributeDescription description={description}/>
      </div>
    </div>
  );
};
}

这样，如果this.props.description不以任何下划线开头，它将仍然发送该值，而slice仅在存在下划线的情况下执行一次。通过使用更简单的description变量，而不是整个过程都重复this.props.description，代码也更易于阅读。

更新您的getEntries函数以返回json()函数给出的Promise。您也可以在其上await，但是由于getEntries是async，它已经返回了Promise，所以这很简单。

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

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

1 个答案: