Обновите компонент данными от родителя в React

Question

В моем приложении реакции у меня есть этот дочерний компонент, который наследует данные от своего родителя. Однако он не обновляет страницу новыми данными из дочернего компонента при нажатии на соответствующую ссылку привязки.

Вот моя сборка - https://suite-search-lk.surge.sh/result/369523

По ссылке выше, если вы щелкнете по предлагаемому элементу h1 карты, он просто обновит URL-адрес с идентификатором, но не обновит страницу соответствующими данными карты из этого идентификатора.

Любая идея, как я могу это исправить? Нужно ли принудительно обновлять компонент?

Родительский компонент (Card Wrapper)

class CardWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      stories: []
    };
  }
  componentDidMount() {
    axios
      .get(API)
      // .then(response => console.log(response))
      // get our stories array, check it and then change state to contain our stories
      .then(data => {
        let stories;
        if (data.data.stories && data.data.stories) {
          if (Array.isArray(data.data.stories)) {
            stories = data.data.stories;
          } else {
            stories = [data.data.stories];
          }
        } else {
          stories = [];
        }
        this.setState({
          stories: stories
        });
      });
  }
  render() {
    return (
      <CardWrapperDiv>
        <div className="headingWrapper">
          <div className="heading"> Suggested for you</div>
        </div>
        <Cards>
          {this.state.stories.map(story => {
            return (
              <Card
                title={story.content.title}
                img={story.content.img}
                description={story.content.description}
                deadline={story.content.deadline_date}
                tags={story.content.tags}
                key={story.id}
                id={story.id}
              />
            );
          })}
        </Cards>
      </CardWrapperDiv>
    );
  }
}

export default CardWrapper;

Дочерний компонент

class Card extends React.Component {
  render() {
    return (
      <CardDiv>
        <div className="cardbox">
          <div className="cardDetails">
            <div className="headlineText">
              <Link to={`/result/${this.props.id}`}> {this.props.title} </Link>
            </div>
            <div className="headlineSub">Colombo, Sri Lanka</div>
            <div className="headlineDes">{this.props.description}</div>
            <div className="textRemain">
              {" "}
              Deadline date: {this.props.deadline}
            </div>
            <div className="buttonRow">
              <button className="downloadBtn">Download</button>
              <button className="viewBtn">View</button>
            </div>
          </div>
          <div className="cardimgwrapper">
            <div className="cardimg">
              <img src={this.props.img} alt="some title" />
            </div>
          </div>
        </div>
      </CardDiv>
    );
  }
}

export default Card;

Answer 1

Вы должны использовать ваш дочерний компонент как чистый компонент. PureComponent Обновление при изменении реквизита.

class Card extends React.PureComponent {

  handleButtonClick() {
    this.forceUpdate();
  }

  render() {
    return (
      <CardDiv>
        .....
        .....
      </CardDiv>
    );
  }
}

export default Card;

Answer 2

Извините, кажется, я понял это, используя следующий пост - Можете ли вы заставить компонент React перерисовываться без вызова setState?

Хотя я не совсем уверен, что это лучший способ.

По сути, я использовал слушатель OnClick для запуска функции и принудительного повторного рендеринга всего компонента.

Надеюсь, что это может помочь кому-то еще:)

class Card extends React.Component {
  handleButtonClick() {
    this.forceUpdate();
  }
  render() {
    return (
      <CardDiv>
        <div className="cardbox">
          <div className="cardDetails">
            <div className="headlineText">
              <Link to={`/result/${this.props.id}`} onClick={this.handleButtonClick}> {this.props.title} </Link>
            </div>
            <div className="headlineSub">Colombo, Sri Lanka</div>
            <div className="headlineDes">{this.props.description}</div>
            <div className="textRemain">
              {" "}
              Deadline date: {this.props.deadline}
            </div>
            <div className="buttonRow">
              <button className="downloadBtn">Download</button>
              <button className="viewBtn">View</button>
            </div>
          </div>
          <div className="cardimgwrapper">
            <div className="cardimg">
              <img src={this.props.img} alt="some title" />
            </div>
          </div>
        </div>
      </CardDiv>
    );
  }
}

export default Card;