如何在父级更改时更新反应组件?
以下是一个功能组件。 它从父组件(基于类)接收 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
属性也有可能未定义,那么可选链也存在,即 MY_ITEMS[id]?.data?.map(....
。
如果在映射之前某些对象可能未定义,您可以将代码更改为这样以避免错误:
{MY_ITEMS[id] && MY_ITEMS[id].data && MY_ITEMS[id].data.map(({ id, title, body }: any) => ...
这样,如果某个地方有未定义的地方,你的最后一部分代码就不会被执行。
但是如果它永远不会被执行,你必须检查对象是否有 id 键,如下所示:
id="x"
{
"x":{...}
}