ReactJS子组件在父组件状态变更后未更新问题求助

嘿，我一眼就看出问题出在哪了——你的PortraitTest组件把props里的displayFromAPIID存到了组件的state里，但这个赋值只在组件第一次挂载时的constructor里执行一次。当你切换分页时，新的文章数据传过来，PortraitTest的props更新了，但组件的state并没有跟着更新，还是用的第一次挂载时的旧ID，自然匹配不到正确的作者信息。

解决办法一：直接使用props（推荐） #

既然displayFromAPIID是从父组件传递过来的，完全没必要把它存在state里，直接在匹配逻辑里使用this.props.displayFromAPIID就行，这样每次props更新，组件都会用最新的值重新计算。

修改后的PortraitTest组件代码：

import React, { Component } from 'react';
class PortraitTest extends Component {
  constructor(props) {
    super(props);
    // 移除state里不需要存储的字段
    this.state = {
      name: null,
    }
    this.portraits = [
      { 'name': 'Name 1', 'apiID': '5d84ba9c0a011064444a243e', },
      { 'name': 'Name 2', 'apiID': '5d84bad40a011064444a2441', },
      { 'name': 'Name 3', 'apiID': '5d84d4d00a011064444a244d', },
      { 'name': 'Name 4', 'apiID': '5d84ba480a011064444a243a', },
      { 'name': 'Name 5', 'apiID': '5d84d4900a011064444a244c', },
      { 'name': 'Name 6', 'apiID': '5d84baeb0a011064444a2442', },
      { 'name': 'Name 7', 'apiID': '5d84baaf0a011064444a243f', },
      { 'name': 'Name 8', 'apiID': '5d84ba720a011064444a243c', },
      { 'name': 'Name 9', 'apiID': '5d84d4120a011064444a244a', },
      { 'name': 'Name 10', 'apiID': '5d84d4640a011064444a244b', },
      { 'name': 'Name 11', 'apiID': '5d84b93a0a011064444a2439', },
      { 'name': 'Name 12', 'apiID': '5d84d3b60a011064444a2449', },
      { 'name': 'Name 13', 'apiID': '5d84bac00a011064444a2440', },
      { 'name': 'Name 14', 'apiID': '5d84ba870a011064444a243d', },
      { 'name': 'Name 15', 'apiID': '5d84ba5e0a011064444a243b', },
      { 'name': 'Name 16', 'apiID': '5dd7cbf984b07d000dc63b2e', }
    ]
  }
  returnObj(){
    // 直接使用props中的最新ID
    const targetId = this.props.displayFromAPIID;
    // 用find方法替代for循环，可读性更高
    const portrait = this.portraits.find(item => item.apiID === targetId);
    if(portrait){
      return(
        <div>
          <p><b>{portrait.name}<br/>{portrait.apiID}<br/>{targetId}</b></p>
        </div>
      )
    }
    // 未找到作者时返回默认内容，避免空渲染
    return <p>Unknown Author</p>
  }
  render() {
    return (
      <div>
        {this.returnObj()}
      </div>
    );
  }
}
export default PortraitTest;

解决办法二：监听props更新（如果必须用state） #

如果你因为某些原因一定要把displayFromAPIID存在state里，那需要在componentDidUpdate生命周期方法里监听props的变化，当props更新时同步更新state：

import React, { Component } from 'react';
class PortraitTest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      displayFromAPIID: this.props.displayFromAPIID,
      name: null,
      apiID: null,
    }
    this.portraits = [/* 你的作者数据 */]
  }

  // 添加生命周期方法，监听props变化并同步state
  componentDidUpdate(prevProps) {
    if (prevProps.displayFromAPIID !== this.props.displayFromAPIID) {
      this.setState({
        displayFromAPIID: this.props.displayFromAPIID
      });
    }
  }

  returnObj(){
    for (var i = 0; i < this.portraits.length; i++) {
      if(this.state.displayFromAPIID === this.portraits[i].apiID){
        return(
          <div>
            <p><b>{this.portraits[i].name}<br/>{this.portraits[i].apiID}<br/>{this.props.displayFromAPIID}</b></p>
          </div>
        )
      }
    }
  }

  render() {
    return (
      <div>
        {this.returnObj()}
      </div>
    );
  }
}
export default PortraitTest;

第一种方案更简洁高效，推荐使用。修改后切换分页时，每个PortraitTest组件都会拿到最新的props ID，匹配到正确的作者信息。

内容的提问来源于stack exchange，提问作者grhmstwrt