Question

我正在尝试使用map函数两次返回一行。从一张地图中获取一个信息，从另一张地图中获取第二个信息。显然，在第二个map函数中，我只能返回一个标签，而第二个标签给我错误。

我尝试了以下代码，该错误给出了一个错误：“解析错误：相邻的JSX元素必须包装在一个封闭的标记中。您是否要JSX片段<> ...？”

tpList.map((val) => {
                        return (
                            <tr>
                                <th scope="row">{val}</th>
                                {name.map((val) => {
                                    return (
                                        <td>{val}</td>
                                        <td>{intake}</td>
                                    )
                                })
                                }
                            </tr>
                        )
                    })

What I am trying to achieve here.

What happens if I wrap the two around a fragmnent

Answer 1

假设name数组的索引和tpList数组的索引相互对应，您可以这样做：

tpList.map((val, i) => {
  return (
    <tr>
      <th scope="row">{val}</th>
      <td>{name[i]}</td>
      <td>{intake}</td>
    </tr>
  );
});

Answer 2

最简单的解决方案是：

return (
           <div>
             <td>{val}</td>
             <td>{intake}</td>
           </div> 
       );

或：

return (
           <>
             <td>{val}</td>
             <td>{intake}</td>
           </> 
       );

.map不会两次返回<td>标签ReactJS

2 个答案: