Arrays 使用React-TypeError的库存管理系统：无法读取属性'；地图'；未定义的 从“React”导入React； 功能StockEventsTable（道具）{ const{stockEvents}=props//与const stockEvents=props.stockEvents相同 返回( {stockEvents.map（事件=>）

数量：{event.qty}

))} ) } 导出默认的StockEventsTable；

从“React”导入React；
导入“./App.css”；）
从“./components/StockEventsTable”导入StockEventsTable；
const fetchedProducts=[
{id:1，名称：'Super Maroo'}]
常量fetchedStockEvents=[
{id:1，类型：'add'，数量：100，产品：fetchedProducts[0]}，
{id:2，类型：'remove'，数量：-20，产品：fetchedProducts[0]}，
{id:3，类型：'remove'，数量：-10，产品：fetchedProducts[0]}
]
函数App（）{
返回(
StockApp
);
}
导出默认应用程序；

---

请帮忙。当我包含.map（）时，程序不会渲染。在此之前，它运行良好。我正在学习并遵循react的教程，所有内容看起来都像示例代码，但我无法编译我的代码。

我认为您应该将

stockEvents

更改为

stockEvents

（全部小写），尝试更改代码

例如：

import React from 'react'; 
import './App.css'; )
import StockEventsTable from './components/StockEventsTable';

const fetchedProducts = [
  {id: 1, name: 'Super Maroo'} ]
  
const fetchedStockEvents = [
   {id: 1, type: 'add', qty: 100, product: fetchedProducts[0]}, 
   {id: 2, type: 'remove', qty: -20, product: fetchedProducts[0]},
   {id: 3, type: 'remove', qty: -10, product: fetchedProducts[0]}
 ]

function App() {
  return (
    <div className='App'>
      <h1>The StockApp </h1>
      <StockEventsTable 
        products={fetchedProducts} 
        stockevents={fetchedStockEvents} />

    </div>
  );
}

export default App;
  

函数StockEventsTable（道具）{
const{stockevents}=props//与const stockevents=props.stockevents相同
返回(
{stockevents&&stockevents.map（事件=>）
数量：{event.qty}

))} 
)
}

将

stockEvents

更改为

stockEvents

（全部小写）

const{stockevents}=props；
返回(
{stockevents.map（（事件）=>(
数量：{event.qty}

))}
);

---

工作代码-

是的，因此您正在使用错误的映射语法。这是内置原型和功能的一个很好的链接

事情是这样的：

 const { stockevents } = props; 
  return (
    <div className="StockEventTable">
      {stockevents.map((event) => (
        <p>Qunatity: {event.qty}</p>
      ))}
    </div>
  );

{stockEvents.map（event=>**（**//这应该是大括号
数量：{event.qty}

**)**)}//在这里也以一个结尾

同样，将stockEvents更改为stockEvents（全部小写）

---

我没有做这些改变，所以你可以发现它们并按照课程进行。如果你是JS新手，试试freecodecamp.org的JS并做出反应，它们是很好的学习点。祝你有愉快的一天

多谢各位！非常感谢你！我的坏消息是，你在jsx中使用速记返回，是的，我错过了，最近学习了它，而且在映射之前使用&&stockEvents.length>0条件也是一种很好的做法，因为可选链接在这种情况下不起作用。非常感谢！

function StockEventsTable(props){
    const {stockevents} = props // same as const stockEvents = props.stockEvents
    return (
        <div className='StockEventTable'>
            {stockevents&&stockevents.map(event => ( 
               <p>Qunatity: {event.qty}</p> 
            ))} 
        </div>
    )
  }

 const { stockevents } = props; 
  return (
    <div className="StockEventTable">
      {stockevents.map((event) => (
        <p>Qunatity: {event.qty}</p>
      ))}
    </div>
  );

 <div className='StockEventTable'>
        {stockEvents.map(event => **(** //this should be curly braces
           <p>Qunatity: {event.qty}</p> 
        **)**)} // and end with one here too