Reactjs 在映射函数中添加映射函数不会显示任何项目

我有两组数据，它们是json文件中的项目数组。仅通过

props.detailData.map映射即可显示内容。但是当我添加
props.imageLinks.map
并将其映射到map中以添加'a href'时，屏幕上不会显示任何内容。事实上，控制台中不会抛出任何错误。怎么了

import React from "react";


const Descriptions = (props) => {
   console.log(props.detailData)
   {/************["a", "b", "c", "d"]**********/}

   console.log(props.imageLinks)
   {/************["http://www.l.com", "http://www.m.com", "http://www.n.com", "http://www.o.com"]**********/}

   return (
       <div> 
          <div> 
             {props.imageLinks.map((l, i) =>
                {props.detailData.map((d, i) =>
                  <li key={i}>
                    {d} 
                    <div>
                      <a href={l}> view images </a>
                    </div>
                  </li>
                )}
             )}
         </div>
      </div>
    )
}

export default Descriptions;

从“React”导入React；
常量描述=（道具）=>{
console.log（props.detailData）
{/***********[“a”、“b”、“c”、“d”]************/}
console.log（props.imageLinks）
{/************["http://www.l.com", "http://www.m.com", "http://www.n.com", "http://www.o.com"]**********/}
返回(
{props.imageLinks.map（（l，i）=>
{props.detailData.map（（d，i）=>

{d}

)}
)}
)
}
导出默认描述；
内部映射函数中的花括号表示函数块，而不是JSX模板语法。函数不返回任何内容，这就是为什么它也不显示任何内容。拆下支架

{props.imageLinks.map((l, i) =>
    props.detailData.map((d, i) =>
      <li key={i}>
        {d} 
        <div>
          <a href={l}> view images </a>
        </div>
      </li>
    )
)} 

{props.imageLinks.map（（l，i）=>
props.detailData.map（（d，i）=>

{d}

)
)} 
内部映射函数中的花括号表示函数块，而不是JSX模板语法。函数不返回任何内容，这就是为什么它也不显示任何内容。拆下支架

{props.imageLinks.map((l, i) =>
    props.detailData.map((d, i) =>
      <li key={i}>
        {d} 
        <div>
          <a href={l}> view images </a>
        </div>
      </li>
    )
)} 

{props.imageLinks.map（（l，i）=>
props.detailData.map（（d，i）=>

{d}

)
)} 
如果你的目标是拥有16个
，那么就使用上面@jj中的代码，因为每次迭代都会遍历每个数组中的每个项目（4x4）

如果您的目标是将4个
与
detailData
和
imageLinks
结合在一起，那么您最好的选择就是合并两个数组，如下所示：

const detailData = ["a", "b", "c", "d"];
const imageLinks = ["http://www.l.com", "http://www.m.com", "http://www.n.com", "http://www.o.com"];
let res = detailData.map((key, i) => {
    return [key, imageLinks[i]]
});
console.log(res);
return (
<div className="App">
{res.map((l, i) => (
    <li key={i}>
        {l[0]} 
        <div>
        <a href={l[1]}> view images </a>
        </div>
    </li>
))}
</div>

constdetaildata=[“a”、“b”、“c”、“d”]；
常量imageLinks=[”http://www.l.com", "http://www.m.com", "http://www.n.com", "http://www.o.com"];
让res=detailData.map（（键，i）=>{
返回[key，imageLinks[i]]
});
控制台日志（res）；
返回(
{res.map（（l，i）=>(

{l[0]}

))}

显然，有多种方法可以合并这两个数组。这只是其中之一。
如果你的目标是拥有16个
，那么就使用上面@jj中的代码，因为每次迭代都会遍历每个数组中的每一项（4x4）

如果您的目标是将4个
与
detailData
和
imageLinks
结合在一起，那么您最好的选择就是合并两个数组，如下所示：

const detailData = ["a", "b", "c", "d"];
const imageLinks = ["http://www.l.com", "http://www.m.com", "http://www.n.com", "http://www.o.com"];
let res = detailData.map((key, i) => {
    return [key, imageLinks[i]]
});
console.log(res);
return (
<div className="App">
{res.map((l, i) => (
    <li key={i}>
        {l[0]} 
        <div>
        <a href={l[1]}> view images </a>
        </div>
    </li>
))}
</div>

constdetaildata=[“a”、“b”、“c”、“d”]；
常量imageLinks=[”http://www.l.com", "http://www.m.com", "http://www.n.com", "http://www.o.com"];
让res=detailData.map（（键，i）=>{
返回[key，imageLinks[i]]
});
控制台日志（res）；
返回(
{res.map（（l，i）=>(

{l[0]}

))}

显然有办法合并这两个数组。这只是其中之一