反应函数中的映射函数错误答案

【问题标题】：error in Map functions in react functions反应函数中的映射函数错误
【发布时间】：2020-11-09 18:00:54
【问题描述】：

我是反应 js 的新手，我被这个卡住了。请发送帮助..

  const rows = results.map((data, i) => {
    const district=data.districtData;
    const state=data.state;
    return (
      
        <tr
          key={i}
          data-toggle="collapse"
          data-target={`#${data.state}`}
          aria-expanded="false"
          aria-controls="navbarSupportedContent"
          aria-label="Toggle navigation"
        >
          <td>{data.state}</td>
          <td>{data.confirmed}</td>
          <td>{data.active}</td>
          <td>{data.recovered}</td>
          <td>{data.deaths}</td>
        </tr>
        district.map((data, i) => {
          return (
            <tr className=" collapse" id={state} key={data.id}>
              <td>{data.id}</td>
              <td>{data.active}</td>
              <td>Thornton</td>
              <td>@fat</td>
              <td>fad</td>
            </tr>
          );
        }); 
    );
  });

这是我的代码 sn-p。我正在为我的项目使用 [https://api.covidindiatracker.com/state_data.json][1] API 我需要一个显示状态详细信息的表格，当单击该行时，应该显示地区详细信息。我尝试为此使用引导程序折叠..

 const [results, setResults] = useState([]);
  useEffect(() => {
    axios
      .get("https://api.covidindiatracker.com/state_data.json")

      .then((res) => {
        setResults(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

来自 API 的数据使用挂钩存储在结果中。行函数中有一些错误（我猜是语法错误）请帮我找到它并提出更正建议！ [1]：https://api.covidindiatracker.com/state_data.json

【问题讨论】：

错误是什么？
把这个setResults(res.data);改成setResults(res);
./src/pages/india.js 第 42:9 行：解析错误：意外令牌，预期“，”40 | {data.deaths} 41 | > 42 | District.map((data, i) => { | ^ 43 | return ( 44 | 45 | {data.id}
您不应使用相同的迭代器名称。请检查函数表达式“const rows = results.map((data, i) => {”的第 1 行，这里“data”是迭代器，稍后是“district.map((data, i) => {”您使用的是相同的“迭代器”名称，我猜这会造成问题。如果这是问题，请告诉我。
您发布的错误是语法错误。

【解决方案1】：

您需要在您的 JSX 中将 javascript 代码 district.map 与 {} 括起来。

const rows = results.map((data, i) => {
    const district = data.districtData;
    const state = data.state;
    return (
      <>
        <tr
          key={i}
          data-toggle="collapse"
          data-target={`#${data.state}`}
          aria-expanded="false"
          aria-controls="navbarSupportedContent"
          aria-label="Toggle navigation"
        >
          <td>{data.state}</td>
          <td>{data.confirmed}</td>
          <td>{data.active}</td>
          <td>{data.recovered}</td>
          <td>{data.deaths}</td>
        </tr>


        {
          district.map((value, i) => (
            <tr className=" collapse" id={state} key={data.id}>
              <td>{data.id}</td>
              <td>{data.active}</td>
              <td>Thornton</td>
              <td>@fat</td>
              <td>fad</td>
            </tr>
          )
          )
        }


      </>
    );

  });

结果：

【讨论】：

同样的错误，我要发送我的发送代码以便您找到错误吗？
这样调试会更容易。
这里是github链接！提前谢谢
干杯@sowmicaML，就在旁注中，您在控制台中收到很多关于相同key 的警告。您可能想制作独特的 key 可能使用 index 和 id 或 value 否则可能会影响性能。