Reactjs “继续犯错误”；TypeError:无法读取属性'；地图'；“未定义”的定义；在React js中使用map函数时

我一直在努力解决这个问题，我甚至不知道那里出了什么问题。下面是对以下代码的解释

在

Slider

组件中，我从父组件获取

storeList

作为道具，并将其传递给

RenderSlider

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

试试这个：

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>

const RenderSlider=props=>{
const{storeList}=props；
如果（！storeList）返回空值；
如果(
返回(
{props.storeList.map（store=>(
{store.businessName}
))}

))；

---

}；

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

在这个漂亮的语法中，您可以验证

props.storeList

不是未定义的/null

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>
  );
};

const RenderSlider=props=>{
console.log（props.storeList）；
控制台.日志（道具类型.存储列表）；
返回(
{props.storeList&&props.storeList.map（store=>（似乎你的
storeList
从某处获取数据，当
滑块
呈现时，它还没有出现

请不要被Chrome日志愚弄，如果你点击[i]图标，你可以看到数据刚刚到达，并且在渲染后会记录下来

我认为在渲染之前添加你的storeList是空的/空的可以解决问题。
可能它是在道具出现之前渲染的。添加
如果
在执行
映射之前检查
storeList
…{props.storeList&&props.storeList.map…@jmargolisvt就像你看到的
控制台.log（props.storeList）一样
在
RenderSlider
的第二行。我打印了
storeList
，它在最下面的图像中显示了正确的数据。另外，我在return语句中尝试了
console.log（）
，它显示了相同的结果。@Idan哇，这很有效！为什么我需要在map（）之前有
props.storeList&
？因为
props.storeList
是未定义的，这就是错误消息所说的。这对我帮助很大！非常感谢！@Idan
&&
不是一种新语法。这从一开始就在javascript中，在过去的半个世纪里一直在C中。嗨@HåkenLid，很好，不是新的。删除了ES6，因为我不确定。请随意编辑…我在那里这是一个建议的“可选链接操作符”，可以在这里使用。但它只是阶段1，因此可能不会在语言中结束。它看起来像：
props.storeList？.map（…）
如果
storeList
为
null
或
undefined
，则返回
undefined
。与
&
不同的是，其他错误值，如
false
或
0
不会短路，因此，如果传入的值类型完全不正确，则会出现异常。这将导致很好，只是测试了一下，还没开始工作。啊，我不知道渲染后会出现日志。谢谢你的提示！
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>
  );
};