在React js中使用map函数时，始终出现错误“ TypeError：无法读取未定义的属性'map'”

Question

我一直在为此苦苦挣扎，我什至不知道那里出了什么问题。这是下面代码的解释。

在Slider组件中，我从上级组件获得storeList作为道具，并将其传递给RenderSlider。

const Slider = (props) => {
   const { storeList } = props;
   return (
       ....
       <RenderSlider storeList={storeList} />
       ...
   );
}

在RenderSlider中，我从storeList得到Slider，然后它打印storeList来仔细检查其内部是否有数据。就像您看到最底端的图像一样，它有10个商店。但是，使用TypeError: Cannot read property 'map' of undefined函数在代码行中发生错误map()。该数组内部具有正确的数据，并且其类型也被打印为object作为数组。我尝试了无数次的调试，但找不到原因。有人可以帮我吗？

const RenderSlider = props => {
  console.log(props.storeList);
  console.log(typeof props.storeList);
  return (
    <div>
      {props.storeList.map(store => ( <--- ERROR happens in this line
        <span key={store.id}>{store.businessName}</span>
      ))}
    </div>
  );
};

Answer 1

在使用map之前，您需要确保存在数组：

使用这种不错的语法，您只需验证props.storeList是否未定义/为空...

const RenderSlider = props => {
  console.log(props.storeList);
  console.log(typeof props.storeList);
  return (
    <div>
      {props.storeList && props.storeList.map(store => ( <--- ERROR happens in this line
        <span key={store.id}>{store.businessName}</span>
      ))}
    </div>
  );
};

Answer 2

尝试一下：

const RenderSlider = props => {
  const {storeList} = props;
  if (!storeList) return null;

  if (
  return (
    <div>
       {props.storeList.map(store => (
       <span key={store.id}>{store.businessName}</span>
    ))}
    </div>

）; };

Answer 3

似乎您的storeList从某个地方获取数据，而到Slider渲染时，数据还不存在。

请不要被Chrome日志记录所愚弄，如果您单击[i]图标，则可以看到数据刚到，并且在渲染后将其记录下来。

我认为在渲染之前添加storeList为空/空会解决此问题。