Question

我正在创建一个应用程序，它从远程源获取一系列新闻项并将其显示在页面上。

我有端点，可以使用$.getJSON()成功通过控制台日志验证。我将此调用放入父组件中，因为子组件需要使用数据。

但是，当我将此数据传递给子组件时，会出现控制台错误：

Uncaught TypeError: Cannot read property 'headline' of undefined

这是因为React尝试在将数据传递到组件之前呈现组件。这让我觉得我应该首先在componentDidMount以外的地方调用我的ajax。

为了解决这个问题，我在子组件上设置了一个方法，如果支柱存在则返回标题：

getHeadline: function () {
    if(this.props.newsItems){
        return this.props.newsItems.headline
    } else {
        return null
    }
},

这感觉就像是一种讨厌的方式。有没有更好的方法，或者我在代码中遗漏了什么？

var BigStory = React.createClass({

    getHeadline: function () {
        if(this.props.newsItems){
            return this.props.newsItems.headline
        } else {
            return null
        }
    },

    render: function () {
        console.log('props:', this.props);
        console.log('newsItems:', this.props.newsItems);
        return (
            <div className="big-story col-xs-12">
                <div className="col-sm-5">
                    <h1>{this.getHeadline()}</h1>
                    <p>Placeholder text here for now.</p>
                    <p>time | link</p>
                </div>
                <div className="col-sm-7">
                    <img src="http://placehold.it/320x220" alt=""/>
                </div>
            </div>
        );
    }
});

var Main = React.createClass({

    getInitialState: function () {
        return {
            newsItems: []
        }
    },

    componentDidMount: function () {
        this.getNewsItems();
    },

    getNewsItems: function () {
        $.getJSON('http://www.freecodecamp.com/news/hot', (data) => {
            console.log('data sample:', data[0]);
            this.setState({newsItems: data})
        })
    },

    render: function () {
        return (
            <div className="container">
                <div className="main-content col-sm-12">
                    <div className="left-sided-lg-top-otherwise col-lg-8 col-md-12 col-sm-12 col-xs-12">
                        <BigStory newsItems={this.state.newsItems[0]}/>
                    </div>
                </div>
            </div>
        );
    }
});

Answer 1

我建议将它留给父母来决定当它在＃34; loading＆＃34;陈述并留下BigStory作为＆＃34;哑巴＆＃34;假设总是会收到有效的newsItem。

，它总是呈现相同的组件

在这个例子中，我展示了<LoadingComponent />，但这可能是你需要的。这个概念是BigStory不应该担心边缘情况＆＃34;接收无效数据＆＃34;。

var Main = React.createClass({
  // ...
  render() {
    const {newsItems} = this.state;
    // You could do this, pass down `loading` explicitly, or maintain in state
    const loading = newsItems.length === 0;
    return (
      <div className="container">
          <div className="main-content col-sm-12">
              <div className="left-sided-lg-top-otherwise col-lg-8 col-md-12 col-sm-12 col-xs-12">
                  {loading 
                    ? <LoadingComponent />
                    : <BigStory newsItem={newsItems[0]} />  
                  }
              </div>
          </div>
      </div>
    );
  }
});

function BigStory(props) {
  // Render as usual. This will only be used/rendered w/ a valid
  return (
    <div className="big-story col-xs-12">
      <h1>{props.headline}</h1>
      {/* ... */}
    </div>
  )
}

另一种解决方案（虽然我推荐一种更像上面的方法）是始终以相同的方式使用BigStory组件，但是提供一个＆＃34;占位符故事＆＃34;当没有故事加载时。

const placeholderNewsItem = {
  headline: 'Loading...',
  /* ... */
};

var Main = React.createClass({
  // ...
  render() {
    const {newsItems} = this.state;
    // Conditionally pass BigStory a "placeholder" news item (i.e. with headline = 'Loading...')
    const newsItem = newsItems.length === 0
      ? placeholderNewsItem
      : newsItems[0];
    return (
      <div className="container">
          <div className="main-content col-sm-12">
              <div className="left-sided-lg-top-otherwise col-lg-8 col-md-12 col-sm-12 col-xs-12">
                  <BigStory newsItem={newsItem} />
              </div>
          </div>
      </div>
    );
  }
});

Answer 2

这是一种非常常见的情况。约翰卡彭特的方法会奏效。我经常使用的另一种方法是使用微调器图像创建某种类型的Loading组件（或者您可能用来表示数据正在运行的任何其他组件）。然后，当客户端等待数据到达时，您可以呈现该Loading组件。例如：

render: function () {
    if (this.state.newsItems.length === 0) return <Loading />;
    return (
        <div className="container">
            <div className="main-content col-sm-12">
                <div className="left-sided-lg-top-otherwise col-lg-8 col-md-12 col-sm-12 col-xs-12">
                    <BigStory newsItems={this.state.newsItems[0]}/>
                </div>
            </div>
        </div>
    );
}

Answer 3

你可以做到的一种方法是将this.props.newsItems.headline设置为＆＃34;加载...＆＃34;最初向用户表明数据即将到来。

将异步获取的数据传递给子道具

3 个答案: