Inventory Management system using React TypeError: Cannot read property 'map' of undefined

Question

import React from 'react';

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

  export default StockEventsTable;

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;

请帮忙。当我包含 .map() 时，程序不会呈现。在此之前，它运作良好。我正在学习并遵循 React 教程，一切看起来都像示例代码，但我无法编译我的代码。

Answer 1

我觉得你应该把stockEvents改成stockevents（全部小写），试试改代码

示例：

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

Answer 2

将stockEvents更改为stockevents（全部小写）

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

工作代码 - https://codesandbox.io/s/late-glitter-me3if?file=/src/App.js

Answer 3

是的，所以你在使用错误的映射语法。对于内置原型和功能来说，这是一个很好的 link。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

事情是这样的：

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

这也是，将 stockEvents 更改为 stockevents（全部小写）我没有进行更改，所以你发现它们并按照课程进行操作，如果你是 JS 的新手，请尝试 freecodecamp.org 的 JS 并做出反应，它们是很好的学习点。祝你有个愉快的一天！

Inventory Management system using React TypeError: Cannot read property 'map' of undefined

Inventory Management system using React TypeError: Cannot read property 'map' of undefined

arrays

reactjs

undefined

array.prototype.map