在 React 中使用来自父级的数据更新组件

Question

在我的反应应用程序中，我有这个从其父组件继承数据的子组件。但是，当单击相关的锚链接时，它不会使用来自子组件的新数据更新页面。

这是我的构建 - https://suite-search-lk.surge.sh/result/369523

从上面的链接中，如果您单击建议的卡片 h1 元素，它只会使用 id 更新 URL，但不会使用来自该 id 的相关卡片数据更新页面。

知道如何解决这个问题吗？我是否必须强制组件重新更新？

父组件（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

抱歉，我似乎已经通过以下帖子解决了这个问题 - Can you force a React component to rerender without calling 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;

Answer 2

你必须使用你的子组件作为一个纯组件。当你的 props 改变时 PureComponent 更新。

class Card extends React.PureComponent {

  handleButtonClick() {
    this.forceUpdate();
  }

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

export default Card;