Question

由于某种原因，我无法使用提取请求中的数据来更新组件的状态。当我console.log时，我可以看到我正在获取数据。我不确定这可能是什么如果这是一个菜鸟问题，请忍受我。我还在学习。

这是我的代码：

import React, { Component } from "react";

class Nav extends Component {
  state = {
    searchTerm: "",
    posts: []
  };

  getPost = e => {
    e.preventDefault();
    const val = e.target.value;
    this.setState({ searchTerm: val }, () => {
      if (val !== "") {
        fetch(
          `http://www.reddit.com/search.json?q=${val}&sort=relevance&limit=25`
        )
          .then(res => res.json())
          .then(data => console.log(data.data))
          //.then(data => this.setState({ posts: data.data }))
          //.then(console.log(this.state.posts))
          .catch(err => console.log(err));
      }
    });
  };

Answer 1

实际上，一切正常，一切顺利，只是您的日志记录是错误的。

 .then(console.log(this.state.posts))

这会记录状态 now 并将console.log()（undefined）的结果作为回调传递到.then链，这显然是错误的。我想你是说：

 .then(() => console.log(this.state.posts))

但这仍然不起作用，因为setState不会立即触发状态更新，而是何时。之后，它将第二个参数作为回调调用，因此您应该登录：

 .then(data => this.setState({ posts: data.data }, () => {
      console.log(this.state.posts);
 }))

一起：

    const response = fetch(
      `http://www.reddit.com/search.json?q=${val}&sort=relevance&limit=25`
    ).then(res => res.json());

    // PS: I would not build up a chain if the logic is not really "chained"
    response.then(data => console.log(data.data));
    response.then(data => this.setState({ posts: data.data }, () => console.log(this.state.data)));
    response.catch(err => console.log(err));

从api接收数据但不能setState

1 个答案: