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

Question

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

以下是一个功能组件。 它从父组件（基于类）接收 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

是一个数组。

Answer 1

对于

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(....

。

Answer 2

如果在映射之前某些对象可能未定义，您可以将代码更改为这样以避免错误：

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

这样，如果某个地方有未定义的地方，你的最后一部分代码就不会被执行。

但是如果它永远不会被执行，你必须检查对象是否有 id 键，如下所示：

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