在React

Question

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

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

在上面的链接中，如果您单击建议的卡片h1元素，它将仅使用ID更新URL，但不会使用该ID中的相关卡片数据更新页面。

有什么主意我可以解决这个问题吗？我是否必须强制组件重新更新？

父组件（卡片包装）

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侦听器来运行函数并强制重新渲染整个组件。

希望这可以帮助其他人：）

ruan@master.danzlive.com:~$ systemctl status mysql.service
● mysql.service - MySQL Community Server
   Loaded: loaded (/lib/systemd/system/mysql.service; enabled; vendor preset: enabled)
   Active: activating (start-post) since Tue 2018-10-30 11:59:35 SAST; 1s ago
  Process: 1988 ExecStartPre=/usr/share/mysql/mysql-systemd-start pre (code=exited, status=0/SUCCESS)
 Main PID: 1998 (mysqld); Control PID: 1999 (mysql-systemd-s)
    Tasks: 16 (limit: 19660)
   Memory: 130.2M
      CPU: 577ms
   CGroup: /system.slice/mysql.service
           ├─1998 /usr/sbin/mysqld
           └─control
             ├─1999 /bin/bash /usr/share/mysql/mysql-systemd-start post
             └─2031 sleep 1

Oct 30 11:59:35 ip-197-101-38-62 systemd[1]: Starting MySQL Community Server...
ruan@master.danzlive.com:~$ mysql
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)

Answer 2

U必须将ur子组件用作纯组件。当您的道具更改时，PureComponent更新。

class Card extends React.PureComponent {

  handleButtonClick() {
    this.forceUpdate();
  }

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

export default Card;