Question

React相对较新，之前（成功地）写了一些组件，但这是我第一次从头开始。我将Rails与Cassandra结合使用以提供JSON响应，并且后端的所有功能都可以正常工作。

我的数据this.state.data如下：

0 {id: {n: 2.1751612473052575e+38}, email: "123@zeba.me", high_score: 73, shoe_size: 10.5, updated_at: "2018-11-06T01:23:36.611-08:00"}
1 {id: {n: 2.8024982600468778e+38}, email: "123@sotkamonlukio.fi", high_score: 13, shoe_size: 7.5, updated_at: "2018-11-06T01:24:55.791-08:00"}
2 {id: {n: 2.4227336868283995e+38}, email: "123@icloud.com", high_score: 99, shoe_size: 10.5, updated_at: "2018-11-06T01:24:07.858-08:00"}

做this.state.data[1]显然会返回

{id: {n: 2.8024982600468778e+38}, email: "123@sotkamonlukio.fi", high_score: 13, shoe_size: 7.5, updated_at: "2018-11-06T01:24:55.791-08:00"}

但是，this.state.data[1].email抛出了这个

TypeError: undefined is not an object (evaluating 'this.state.data[1].email')

如何访问电子邮件和其余数据？

完整的组件代码：

import React, { Component } from 'react';

export default class Table extends Component {
  constructor() {
    super();
    this.state = {
      data: [],
    }
  }

  componentDidMount() {
    fetch('http://localhost:3000/api/users')
      .then(response => response.json())
      .then(data => this.setState({ data }))
  }

  render() {
    return(
      <div className="table">
        <h1>LOL</h1>
        <p>{this.state.data[1].email}</p>
      </div>
    )
  }
}

Answer 1

它是一个常见错误，在调用render方法之前，请求没有完成，只需添加一条if语句

  render () {
    const { data } = this.state
    return (
      <div className='table'>
        <h1>LOL</h1>
        {data.length > 0 && <p>{data[1].email}</p>}
      </div>
    )
  }

Answer 2

问题在于，当您的组件开始渲染时，this.state.data[1].email尚未被加载。只需检查数据是否已经加载，如下所示：

render(){
    if(this.state.data.length > 0)
        return(
             <div className="table">
                <h1>LOL</h1>
                <p>{this.state.data[1].email}</p>
             </div>
        )
    else return <div/>
}

另一种可能的解决方案是使用map函数。它只会在填充数组时呈现某些内容。代码如下：

render(){
    return(
         <div className="table">
            <h1>LOL</h1>
            { this.state.data.map(user => <p>{user.email}</p>) }
         </div>
    )
}

对于data数组中的每个用户，该组件将使用电子邮件呈现标签<p>。当数组中没有任何内容时，该组件将不呈现任何内容。

Answer 3

This.state.data最初设置为空数组。因此，当您的组件首次呈现时，它将是一个空数组。

在componentDidMount中，您将进行api调用并将api响应分配给状态数据。因此，该方法在首次渲染后被调用

之所以会出现此问题，是因为您正在从this.state.data数组访问第一个索引，该索引在第一次呈现时显然是一个空数组。因此，您要做的是

更改

   <p>{this.state.data[1].email}</p>

收件人

    <p>{this.state.data.length > 0 && this.state.data[1].email}</p>

或者迭代数组并渲染p个元素

   {this.state.data.length > 0 && this.state.data.map(d => (  
            <p key={d.id}>d.email}</p>
   )}

如果数组中每个对象没有唯一的ID，请使用索引作为键

React无法读取数组内部的对象（状态）

3 个答案: