未定义的属性“长度”-React教程

Question

我正在关注一个React教程，但是有一个错误让我无法继续，我尝试了所有尝试，却给出了未定义的内容，但是我已经更改了几件事，但无法解决。

代码：

class PostsManager extends Component {
  state = {
    loading: true,
    posts: [],
  };

  componentDidMount() {
    this.getPosts();
  }

  async fetch(method, endpoint, body) {
    try {
      const response = await fetch(`${API}${endpoint}`, {
        method,
        body: body && JSON.stringify(body),
        headers: {
          'content-type': 'application/json',
          accept: 'application/json',
          authorization: `Bearer ${await this.props.auth.getAccessToken()}`,
        },
      });
      return await response.json();
    } catch (error) {
      console.error(error);
    }
  }

  async getPosts() {
    this.setState({ loading: false, posts: await this.fetch('get', '/posts') });
  }

  async deletePost(post) {
    if (window.confirm(`Are you sure you want to delete "${post.title}"`)) {
      await this.fetch('delete', `/posts/${post.id}`);
      this.getPosts();
    }
  }
    return (
      <Fragment>
        <Typography variant="display1">Posts Manager</Typography>
        {this.state.posts.length > 0 ? (
          <Paper elevation={1} className={classes.posts}>
            <List>
           ....

Answer 1

同意Glup3，但我只使用this.state.posts.length而不是检查长度是否大于0。这样，如果.length未定义或为0，它将为假。

{this.state.posts.length ? .... 

Answer 2

假设this.fetch('get', '/posts')可以正常工作并返回一些您需要实际评估响应的json：

async getPosts() {
    const response = await this.fetch('get', '/posts');
    const json = await response.json();
    this.setState({ loading: false, posts: json });
 }

mdn上的更多信息here。

Answer 3

您想渲染<Fragment>...</Fragment>，但会收到错误消息。这是因为this.state.posts为null / undefined并且不能在其中使用长度。

解决方案：设置一个if条件，然后等待它不再为null。

if (this.state.posts != null) {
  return (<Fragment> ... </Fragment>);
}
else {
  return (<div> Loading... </div>); // or something else
}

您的Glup3