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

Question

Ultimately I'm trying to pass mapped elements in an array to a child component. I made a WordPress API call to get back posts for a preview page, and now that I'm trying to have that data render in their own pages, I keep getting that the data is undefined. The dynamic links are rendering as expected, but none of the other data is being passed.

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;

How do I get the data from the array into the Article component?

Answer 1

Your problem is with asynchronous requests.

You have a route that will call the render method when the user clicks on a link. At that point in time, javascript has no reference to the article anymore, you need to persist it.

Here's an example of what you are experiencing

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

The code above will always log 10

A solution to this problem is using bind .

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

So, in your code, you need to persist the article variable.

You can do that by calling a method that takes the 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>
    )
  }

Hope this points you in the right direction.