在 React 中的组件之间传递数据

Question

最终我试图将数组中的映射元素传递给子组件。我打了一个 WordPress API 电话来取回预览页面的帖子，现在我试图让该数据呈现在他们自己的页面中，但我一直得到数据未定义。动态链接按预期呈现，但正在传递 none 的其他数据。

Articles.js

// cut for brevity
  render() {

    let articles = this.state.newsData.map((article, index) => {
      if(this.state.requestFailed) return <p>Failed!</p>
      if(!this.state.newsData) return <p>Loading...</p> 
      return(
        <div key={index} className="article-container">

          <div className="article-preview">
          <span className="article-date">{article.date}</span>
          <h5>{article.title.rendered}</h5>
          <div dangerouslySetInnerHTML={{ __html: article.excerpt.rendered }} />

          <Link to={`/news/${article.slug}`}>Read More...</Link>

          </div>
          <Route path={`/news/:articleSlug`}
            render={ props => <Article data={article} {...props} />} 
            />
        </div>

      )
    });

    return (
      <div>
        <h3>All Articles from Blog</h3>
        {articles}
      </div>
    )
  }

Article.js

import React from 'react';

const Article = ({match, data}) => {
  let articleData;
  { console.log(this.data) }

  if(data)
    articleData = <div>
      <h3> {data.title.rendered}</h3>
      <div dangerouslySetInnerHTML={{ __html: data.content.rendered }} />
      <hr />
    </div>

  else 
    articleData = <h2> Sorry. That article doesn't exist. </h2>;

    return (
      <div>
        <div>
          {articleData}
        </div>
      </div>
    )
}

export default Article;

如何从数组中获取数据到 Article 组件中？

Answer 1

您的问题与异步请求有关。

您有一个 route，它会在用户单击 link 时调用 render 方法。在那个时间点，javascript 不再引用 article，你需要坚持它。

这是您遇到的一个例子

for (var i = 0; i < 10; i++) {
  setTimeout(function() { console.log(i); }, 1);
}

上面的代码将始终记录 10

此问题的解决方案是使用 bind。

for (var i = 0; i < 10; i++) {
  setTimeout(function(i) { console.log(i); }.bind(null, i), 1);
}

因此，在您的代码中，您需要保留 article 变量。

您可以通过调用采用 data.

的方法来做到这一点

  renderArticle(data) {
    return props => <Article data={data} {...props} />
  }

  render() {

    let articles = this.state.newsData.map((article, index) => {
      if(this.state.requestFailed) return <p>Failed!</p>
      if(!this.state.newsData) return <p>Loading...</p> 
      return(
        <div key={index} className="article-container">

          <div className="article-preview">
          <span className="article-date">{article.date}</span>
          <h5>{article.title.rendered}</h5>
          <div dangerouslySetInnerHTML={{ __html: article.excerpt.rendered }} />

          <Link to={`/news/${article.slug}`}>Read More...</Link>

          </div>
          <Route path={`/news/:articleSlug`}
            render={this.renderArticle(article)} 
            />
        </div>

      )
    });

    return (
      <div>
        <h3>All Articles from Blog</h3>
        {articles}
      </div>
    )
  }

希望这能为您指明正确的方向。

在 React 中的组件之间传递数据

Passing data between components in React

javascript

wordpress

reactjs

react-router

react-router-v4