Question

我有以下代码，可从Twitter API提要中获取数据。我使用回调函数并将setState的值设置为我的状态属性。当我在渲染器中使用它以仅用于控制台并查看该值时，它将显示

“无法读取未定义的属性'created_at'”。

我认为它正在尝试在甚至不可用之前进行获取。我不知道该怎么办。有人可以帮忙吗？当我使用console.log(this.state.twitterfeed.techcrunch[0])时，我没有任何错误。

我得到了物体

但是当我使用console.log(this.state.twitterfeed.techcrunch[0].created_at)时出现错误

    class Columns extends Component {
      constructor() {
        super();
        this.state = {
          twitterfeed: {
            techcrunch: [],
            laughingsquid: [],
            appdirect: []
          }
        };
      }
      updateTwitterFeed = (data, user) => {
        var twitterfeed = { ...this.state.twitterfeed };
        if (user === "appdirect") {
          twitterfeed.appdirect = data;
        } else if (user === "laughingsquid") {
          twitterfeed.laughingsquid = data;
        } else {
          twitterfeed.techcrunch = data;
        }
        this.setState({ twitterfeed });
      };

      componentDidMount() {
        fetch(
          "http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=techcrunch"
        )
          .then(response => response.json())
          .then(data => this.updateTwitterFeed(data, "techcrunch"));
        fetch(
          "http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=laughingsquid"
        )
          .then(response => response.json())
          .then(data => this.updateTwitterFeed(data, "laughingsquid"));
        fetch(
          "http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=appdirect"
        )
          .then(response => response.json())
          .then(data => this.updateTwitterFeed(data, "appdirect"));
      }

      render() {
        return (
          <div className="container mx-0">
            <div className="row">
              <div className="col-4 col-md-4">
                {console.log(this.state.twitterfeed.techcrunch[0].created_at)}
                <Column tweet={this.state.twitterfeed.techcrunch} />
              </div>
            </div>
          </div>
        );
      }
    }

Answer 1

this.state.twitterfeed.techcrunch[0]将在提取完成之前为undefined，因此尝试访问created_at会引发错误。

您可以例如渲染null，直到在请求后填充techcrunch数组为止。

class Columns extends Component {
  // ...

  render() {
    const { techcrunch } = this.state.twitterfeed;

    if (techcrunch.length === 0) {
      return null;
    }

    return (
      <div className="container mx-0">
        <div className="row">
          <div className="col-4 col-md-4">
            <Column tweet={techcrunch} />
          </div>
        </div>
      </div>
    );
  }
}

Answer 2

我在这里有一些建议。

首先，尝试使用 Promise.all 合并您的提取逻辑。

看看文档here。这将使

0x1000

进入

fetch(..).then(..)
fetch(..).then(..)
fetch(..).then(..)

在渲染React组件时， componentDidMount（）也会在 render（）之后运行。看看反应生命周期here。

因此，要确保要渲染的数据可用的解决方案是将状态标记设置为：

Promise
    .all([fetch(..), fetch(..), fetch(..)])
    .then(...) // all 3 responses here

React App：提取后未定义的值

2 个答案: