问题

Question

在 React 上返回数组时出现问题：未捕获的类型错误：无法读取未定义的属性（读取“items”）

2022-04-14

483

javascript html reactjs react-hooks

我尝试从来自 useState 钩子的数组中返回 div 中的 p，但出现此错误：Uncaught TypeError: 无法读取未定义的属性（读取“items”）

function App(){

        
    const [items, setLab] = useState(["a", "b", "c"])

    console.log(items)
    return (
        <div> laberinto
        {this.items.bind(this).map((item) => {
             <div>
                 <p>{item}</p> 
             </div>
         })
        }
        </div>
    )

}

 
render(
    <App/>,
    document.getElementById('app'),
);

Answer 1

您的 App 组件是一个功能组件（而不是类组件），因此您不需要使用 this 关键字。

{items.map((item) => {
  <div>
    <p>{item}</p>
  </div>
 })
}

有关功能和类组件的更多详细信息，请参见此处： https://reactjs.org/docs/components-and-props.html#function-and-class-components

Answer 2

问题

this 在 React 函数组件中未定义。
Array.prototype.map 回调需要返回一个映射到的值。

解决方案

删除所有 this 引用。
从 .map 回调返回 JSX。不要忘记包含 React 键。

函数主体中的显式返回语句：

function App() {
  const [items, setLab] = useState(["a", "b", "c"]);

  return (
    <div>
      laberinto
      {items.map((item) => {
        return (
          <div key={item}>
            <p>{item}</p> 
          </div>
        );
      })}
    </div>
  );
}

没有函数主体的隐式返回：

function App() {
  const [items, setLab] = useState(["a", "b", "c"]);

  return (
    <div>
      laberinto
      {items.map((item) => (
        <div key={item}>
          <p>{item}</p> 
        </div>
      ))}
    </div>
  );
}