react应用程序：获取后未定义的值

IT技术 javascript reactjs
2021-05-05 03:56:59

我有以下代码，我从 twitter API 提要获取数据。我使用回调函数并将值设置为我的状态属性。当我在渲染中使用它只是控制台并查看值然后它显示

“无法读取未定义的属性‘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>
        );
      }
    }
2个回答

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>
    );
  }
}

我在这里有一些建议。

首先，尝试使用Promise.all整合您的 fetch 逻辑。

看看这里的文档。这将使

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

进入 

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

同样在渲染 React 组件时componentDidMount()在render()之后运行。在这里查看 react 生命周期。

因此，确保要呈现的数据可用的解决方案是在状态上设置一个标志，例如：

this.state = { loading: True, ... } // constructor

Promise
    .all([...])
    .then(...)
    .then(args => 
        this.setState({loading: False});
     ...) // componentDidMount()

render() { 
    if(this.state.loading)
        return  <div>Loading...</div>

    return (
       // your component with data already set into the state :)
    )
}
其它你可能感兴趣的问题
上一篇ismounted 反模式，跟踪自己的财产 下一篇React Recharts - 从不同对象获取数据