时间戳

首页 > 解决方案 > 如何更新父更改的反应组件？

javascript - 如何更新父更改的反应组件？

问题描述

如何更新父更改的反应组件？

以下是一个功能组件。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;

NoteMY_ITEMS是一个对象，MY_ITEMS[id].data也是一个数组。

标签： javascriptreactjs

解决方案

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属性可能未定义，那么可选链也存在，即MY_ITEMS[id]?.data?.map(.....

推荐阅读