Question

我正在使用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>

我将如何解决这个问题？

Answer 1

您的assets道具似乎未定义。做这样的事情

const assets = (this.props.assets || []).map(asset => {

应该阻止错误的发生。但是，如果不查看全部内容，很难说出问题所在。

我猜您正在使用某种API来获取数据，在这种情况下，理想情况下，您应该具有某种loading或empty state，并显示出道具是还没准备好。

类似的东西

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

Answer 2

当收到assets数组为空时，它会出错。您可以使用ES2020中发布的 Nullish合并运算符。在渲染中，使用

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

然后您可以根据自己的逻辑使用地图功能

assets.map(() => {})

这样，如果assets为空，它将自动分配一个空数组assets，而不会破坏代码。而且，它减少了为解决此问题而要编写的代码量，并使代码看起来也很干净。

TypeError：无法读取未定义的属性“地图”

2 个答案: