Javascript 类型错误：无法读取属性'；地图'；未定义的

我正在使用react创建用于库存管理的基本crud应用程序，但是我在DataTable.render上收到此错误

TypeError: Cannot read property 'map' of undefined

它突出显示的代码如下

 27 | 
  28 |  render() {
  29 | 
> 30 |    const assets = this.props.assets.map(asset => {
     | ^  31 |      return (
  32 |        <tr key={asset.id}>
  33 |          <th scope="row">{asset.id}</th>

27|
28 | render（）{
29 | 
>30 | const assets=this.props.assets.map（asset=>{
|^31 |返回(
32 |        
33 |{asset.id}

---

我该如何解决这个问题呢？

当

资产

数组作为emopty接收时，它会出现这个错误。 您可以使用ES2020中推出的Nullish合并操作符

let assets = this.props.assets ?? [];

然后，您可以根据自己的逻辑使用map函数

assets.map(() => {})

---

通过这种方式，如果

资产

为空，它将自动分配一个空数组

资产

，而不会破坏代码。此外，它减少了要编写的代码量，以解决此问题，并使代码看起来干净。

看起来您的

资产

属性未定义像这样

const assets=（this.props.assets | | |[]）.map（asset=>{

应该可以阻止错误的发生。但是如果不查看完整的组件，就很难说问题出在哪里

我猜您正在使用某种API获取数据，在这种情况下，理想情况下，您应该有某种

加载

或

空状态

，并在道具尚未准备好时显示出来

大概

...
render() {
  if (this.props.assets === undefined) {
    return <Loading />
  }
  
  const assets = this.props.assets.map(asset => {
...

。。。
render（）{
if（this.props.assets===未定义）{
返回
}
const assets=this.props.assets.map（资产=>{
...

您的错误意味着

this.props.assets

是

未定义的

，这表明您没有将

assets

作为道具传递给组件，或者您传递的值是

未定义的

我该如何解决这个问题？-在调用之前确保

this.props.assets

是一个数组<代码>.map（）在它上面。这可能是因为

This.props.assets

在初始渲染时是

未定义的
资产。请确保
This.props.assets
最初是一个空数组，而不是
null
或
未定义的
资产。您如何将
资产
props传递到此组件？正如您所看到的
assets
未定义调整必须添加问号
此.props？.assets.map
，但正确的解决方法是为
资产添加proptype和默认prop
prop。。。