为什么反应地图功能无法正常工作？ [关闭]答案

【问题标题】：Why react map function is not working properly? [closed]为什么反应地图功能无法正常工作？ [关闭]
【发布时间】：2022-01-18 10:19:07
【问题描述】：

当我在 react 中使用地图时，是否会收到意外的令牌错误？

import React, { useState, useEffect } from "react";
import axios from "axios";

export default function ApiHook() {
  const [employees, setEmployees] = useState([]);

  useEffect(() => {
    axios
      .get("http://dummy.restapiexample.com/api/v1/employees")
      .then((response) => {
        console.log(response);
        setEmployees(response.data);
      })
      .catch((e) => console.log(e));
  }, []);
  return (
      {employees.map((employee) => {
        return <p>{employee.employee_name}</p>;
      })}
  );
}

【问题讨论】：

您应该在React.Fragment 或<> ... </> 中添加map
这是因为您使用了 JSX 表达式 ({...})，而您不在 JSX 上下文中，而只是在普通 JavaScript 上下文中。只需从 map 调用周围删除 { 和 } 并直接返回数组。或者，或者，将数组包装在片段或类似内容中，但除非您有其他理由这样做，否则没有必要。
所以return employees.map((employee) => { return {employee.employee_name}; }); 或return (<>{employees.map((employee) => { return {employee.employee_name}; })} </>); （旁注：map 回调可以只是.map(employee => {employee.employee_name}) 甚至.map(({employee_name}) => {employee_name})）
投票关闭为错字。
至少相关：stackoverflow.com/questions/69583384/…

标签： javascript reactjs json

【解决方案1】：

你必须用片段包装。因为你只需要返回一个元素。

 return (
    <>
      {employees.map((employee) => {
        return <p>{employee.employee_name}</p>;
      })}
    </>
  );

【讨论】：

我认为这是正确的答案。但是解决问题而不只是发布正确的代码会很方便。我认为问题在于，返回函数需要一个反应元素作为参数传递，而映射函数返回一个反应元素数组。所以要解决这个操作可以将数组包装在一个空的反应元素（>）中它是如何在你的代码中完成的
@Olli - 这是 one 正确的编码方式（尽管如您所说，如果解释为零，则不是真正的答案）。另一种是只返回数组。从组件函数（或class组件render函数）返回数组是完全有效的。
@T.J.Crowder 是的，你是对的。返回一个数组也是有效的。在这种情况下，它只是无效的，因为 { } （就像您在对问题本身的评论中所写的那样）。我不知道这个。但我不明白为什么这个问题被关闭了。我认为这不应该被评估为一个错字。对我来说，这个问题似乎更可能是由于缺乏对 jsx 部分内部“上下文切换”的了解。（我也不知道）
@Olli - 是的，在我看来，这是非常临界的调用，但也会有多个重复项（如果我们能在所有问题中找到它们！）。 :-) 喜欢this one。