如何在父更改时更新反应组件？

如何解决如何在父更改时更新反应组件？

如何根据父级更改更新 React 组件？

以下是一个功能组件。它从父组件（基于类）接收 prop id 并且（id 是动态的并且会发生变化）..

因此基于 id 我正在执行以下渲染。

const DataComp = ({ id,}: any) => {


  return (
    <div className="myComp">
      <div className="data" >
        {MY_ITEMS[id].data.map(({ id,title,body }: any) => (
          <div key={id}>
            <p>{title}</p>
            <p>{body}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default DataComp;

但我收到错误无法读取未定义的属性映射。

当我在 DataComp 中执行控制台日志时，我可以看到 MY_ITEMS[id].data 的值。我假设在几分之一秒内 MY_ITEMS[id].data 是未定义的。

所以我尝试了以下方法

MY_ITEMS[id].data?.map

(MY_ITEMS[id].data || []).map

 MY_ITEMS[id].data && MY_ITEMS[id].data.map

但这些都不会导致 UI 更新。

这是父组件（基于类）

class Parent extends Component<any,any> {
  constructor() {
    super(props);
    this.state = {
      currentId: MY_ITEMS[0].id,};
  }

componentDidMount() {
this.setId(MY_ITEMS[0].id)
}


async setId(id) {
this.setState({currentId: id})

const someOtherAPIData = await getSomeOtherAPIData()

this.setState({someOtherAPIData})
}

  public render() {

    return (
      <div className="parent">
        <DataComp id={this.state.currentId} />
      </div>
    );
  }
}

export default Parent;

注意 MY_ITEMS 是一个对象，MY_ITEMS[id].data 是一个数组。

解决方法

对于 id 未定义或不是 MY_ITEMS 对象中的有效键的任何边缘情况，您应该保护未定义的访问/映射。在 MY_ITEMS[id] 上使用可选链，即 MY_ITEMS[id]?.data。这假设如果定义了 MY_ITEMS[id]，则存在要映射的 data 属性数组。

const DataComp = ({ id }: any) => {
  return (
    <div className="myComp">
      <div className="data" >
        {MY_ITEMS[id]?.data.map(({ id,title,body }: any) => (
          <div key={id}>
            <p>{title}</p>
            <p>{body}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

如果有可能连 data 属性都未定义，那么 Optional Chain 也是如此，即 MY_ITEMS[id]?.data?.map(....。

如果有可能在映射某些对象之前未定义，您可以将代码更改为此不会出错：

 {MY_ITEMS[id] && MY_ITEMS[id].data && MY_ITEMS[id].data.map(({ id,body }: any) => ...

这样，如果某些地方存在未定义的代码，则不会执行您的最后一部分代码。但是如果它永远不会被执行，你必须检查对象是否有像下面这样的 id 键：

id="x"
{
"x":{...}
}