Question

最终我试图将数组中的映射元素传递给子组件。我做了一个WordPress API调用来获取预览页面的帖子，现在我试图在他们自己的页面中渲染数据，我一直认为数据是未定义的。动态链接按预期呈现，但没有传递其他数据。

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;

如何将数组中的数据导入文章组件？

Answer 1

你的问题在于异步请求。

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

以下是您遇到的一个示例

＆＃13;

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

＆＃13;

上面的代码将始终记录10

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

＆＃13;

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

＆＃13;

因此，在您的代码中，您需要保留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中的组件之间传递数据

1 个答案: