TypeError：无法解构“未定义”的属性“list2”

Question

我收到以下错误，不知道为什么？

我是 REACT 的新手，对基础知识很困惑，我有义务向这个小组寻求帮助。

TypeError: Cannot destructure property 'list2' of 'undefined' as it is undefined.
SimpleList5
C:/Nusrat/react/material-ui/src/Testmap3.jsx:14
  11 |     <SimpleList5 list2={mylist} />
  12 | );
  13 | 
> 14 | const SimpleList5 = ({ list2 }) => (
     | ^  15 |     list2.map(item => (
  16 |         <li key={item}>{item}</li>
  17 |     ))

代码是：

import React from 'react'

export const Testmap3 = () => {

    //If we would use the List as child component in another
    //component, we could pass the list as props to it:

    const mylist = ['a', 'b', 'c'];

    const App = () => (
        <SimpleList5 list2={mylist} />
    );

    const SimpleList5 = ({ list2 }) => (
        list2.map(item => (
            <li key={item}>{item}</li>
        ))
    )

    return (
        <div>
            SimpleList5 : {SimpleList5()}

        </div>
    )
}

export default Testmap3;

Answer 1

list2 在尝试映射时可能尚未定义。

要解决此问题，请尝试将添加 list2.map(item => ( 更改为 list2 && list2.length && list2.map(item => (

Answer 2

您正在调用不带参数的SimpleList5 方法，但在此函数内部，您希望对象内部具有 list2 属性。调用SimpleList5函数时需要传递参数

Answer 3

您在Testmap3 范围内定义了App 组件，该组件正确呈现SimpleList5 组件。但是在Testmap3 的重新调整值中，您只是在调用类似{SimpleList5()} 的函数，这会导致错误，因为没有传递给SimpleList5 组件的道具。

要么渲染App组件，要么直接使用props渲染SimpleList5组件。

// the return value of Testmap3 component should be
return (
     <div>
       <App/>
     </div>
)

// or

return (
   <div>
     <SimpleList5 list2={mylist}/>
   </div>
)

Answer 4

SimpleList5 应该是它自己的接受 prop 的组件，TestMap3 应该呈现该组件。

现在，list2 未定义，因为您正在调用 SimpleList5 函数没有传入 list2。

最快的解决方案是传入myList：

return (
 <div>
  SimpleList5: { SimpleList5({list2: myList}) }
 </div>
)

应该可以。但是，将myList 传递给函数是多余的，因为您可以在整个组件中访问该数组，因此您可以直接映射该数组而无需调用SimpleList5。

要通过传递 props 以“反应”方式或典型反应模式执行此操作，您必须为 SimpleList5 创建一个功能组件并让您的 TestMap3 返回它。

您不需要“应用程序”功能。你想把你的SimpleList5 拉到它自己的组件中，就像这样

const SimpleList5 = ({ list2 }) => {
  return (
    <>
      {list2.map(item => {
        return <li key={item}>{item}</li>;
      })}
    </>
  );
}

export default SimpleList5

这里发生了一些事情。

• 组件正在接收一个名为 list2 的 prop
• 我们正在从 props 对象中解构它，因此我们可以使用 list2 而不是 props.list2 直接访问它（如果我们不解构，我们将不得不这样做。
• 我们将为list2 中的每个元素返回<li> 元素。

空的 HTML 标签，<> </> 代表一个反应片段。我们使用它，所以我们不必有一个不必要的div 标签（重要的是要知道一个反应组件只能返回一个父元素）。

现在，要使用它并传入您拥有的 myList，请重写 TestMap3 组件：

const TestMap3 = () => {
  const mylist = ["a", "b", "c"];

  return (
    <div>
      SimpleList5: <SimpleList5 list2={myList} />
    </div>
  );
};

export default TestMap3;

在这里，我们声明myList 数组，然后返回一个div 并呈现简单的列表。 <SimpleList5 list2={myList} /> 将 myList 数组传递给 prop list2。每当 TestMap3 呈现时，SimpleList5 将在 list2 属性中包含 myList。