Question

创建我的第一个ReactJS网站并在后端中使用Node（目前在随后的代码中），我将获取数据，然后将其打印在页面上。我设法从服务器上打印项目中人员的姓名，他们的照片和他们的电子邮件，但得到该项目的描述，但我得到了错误：

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

我不明白。

这是代码：

class ProjectPage extends Component {
constructor(props) {
    super(props);
    this.state = {
        user: [],
        description: [],
        mail: [],
        name: [],
    };
    this.getNames = this.getNames.bind(this);
    this.getPictures = this.getPictures.bind(this);
    this.getMails = this.getMails.bind(this);
    this.getDetails = this.getDetails.bind(this);
}

我创建了类和所有必需的元素

componentDidMount() {
    console.log("BEGIN componentDidMount");
    this.fetchDetails();
    this.fetchNames();
    this.fetchMails();
    console.log("END componentDidMount");
}

调用我componentDidMount（）中的所有函数

fetchDetails() {
    console.log("BEGIN fetchDetails()");

    let url = 'http://192.168.1.33:8080/getprojectdetails/Aprite';
    console.log("url details = " + url);

    fetch(url)
        .then(results => {
            var json = results.json();
            return json;
        })

        .then(data => {
            this.setState({ description: data });
        })

    console.log("END fetchData()");
}

这是项目描述的获取

getDetails = () => {
    let lines = [];
    let nbr = this.state.description.length;
    console.log("nbr = " + nbr);
    if (nbr){
        console.log("lines = " + this.state.description[0].P_Description);
        for (let i = 0; i < nbr; i++)
            lines.push(<div key={this.state.descripton[i].P_Description}></div>);
    }
    return (lines);
}

以及在Render（）函数中打印数据的函数

但是当我尝试打印此数据时，nbr的值从0传递到1，然后再次传递到0 ...在控制台日志中，我可以看到说明，但它没有出现在网站上，我没有明白了。

请帮助我吗？

Answer 1

getDetails函数内部循环中有一个错字
您应该写this.state.description而不是this.state.descripton

希望这可以解决您的问题：）

Answer 2

因此，在使用React渲染生命周期系统时，componentDidMount实际上会在第一个渲染之后发生。在第一个渲染期间，您尝试访问空数组的第一个元素，这是您看到的错误。

为了解决此问题，在您的render方法中，当我们等待fetchDetails从服务器返回值时，应该有一个后备东西可以渲染。如果您不希望其呈现任何内容，则只需return null。

即。

const { description = [] } = this.state;
if (description.length === 0) {
    return null;
}
return this.getDetails();

请注意，为了避免所有这些（变得难以维护）：

this.getNames = this.getNames.bind(this);
this.getPictures = this.getPictures.bind(this);
this.getMails = this.getMails.bind(this);
this.getDetails = this.getDetails.bind(this);

您可以像这样将它们定义为类属性：

getNames = () => {
   // do stuff
}

不了解未捕获的Typerror无法读取未定义的0属性吗？

2 个答案: