Question

在componentDidMount（）中，我获取了数据并将其传递给状态。

componentDidMount() {
    const url = fetch('http://localhost:8000/posts/')
        .then(response => response.json())
        .then(response => {
            this.setState({ data: response });
        })
}

接下来，我尝试获取this.state.data[0].id的数据在这种情况下，我得到了错误

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

但是，如果我尝试通过this.state.data[0]获取数据，则会有一个对象进入，那里有一个属性id

Answer 1

您正在从远程源获取数据，并且此获取操作是异步的。在应用的初始呈现中，您尚无此数据。componentDidMount会触发获取操作，您的数据会进入您的应用中。因此，您应该使用注释中建议的条件渲染。这是一个简单的示例：

class App extends React.Component {
  state = {
    posts: []
  };
  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(response => response.json())
      .then(posts => {
        this.setState({ posts });
      });
  }
  render() {
    const { posts } = this.state;
    return <div>{!!posts.length && posts[0].title}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

并进行了一些增强。因为我很确定您不会在应用程序中使用单个数据项。作为将来的参考，您可以使用这种简单的逻辑。更好的方法是重构此代码并编写一个单独的Post组件。

class App extends React.Component {
  state = {
    posts: []
  };
  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(response => response.json())
      .then(posts => {
        this.setState({ posts });
      });
  }
  render() {
    const { posts } = this.state;
    if (!posts.length) return <p>Loading...</p>;
    return (
      <div>
        {posts.map(post => (
          <div key={post.id}>
            <p>{post.title}</p>
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

ReactJs：无法访问对象元素

1 个答案: