Question

我正在做一个React项目！我想知道我们怎么能达到这个结果？

我想遍历数组中的某些名称。
我想遍历另一个数组中图像的一些链接。

我们如何实现这一目标？还是我们可以同时在两个数组上通过映射进行迭代？

我想要什么？我想用文字（头部）和图像渲染卡片。我在两个单独的数组中包含了链接和文本。

例如：const projectText = ['x','y','z'];， const imgUrl = ['x'....];等

这里的代码：

{/*NOTE: Don't forget to optimise code as DRY before final build */}
                  <div ClassName="container">
            {projectText.map((project, index) => (
                    <div key={index} className="project">
                    <h3>{project}</h3>
                    <img key={index} src={`../img/${project}.png`} alt={project}/>
                    <a role="button" className="btn" href={`https://${project}`} target="_blank" rel="noopener noreferrer">Github</a>
                    </div>
                  </div>
                ))}
                {/* experiment train */}

Answer 1

假设projectText和imageUrl按顺序包含元素，并且元素数量相同，则您可以使用imageUrl的索引直接访问projectText数组中的url

   <div ClassName="container">
        {projectText.map((project, index) => (
                <div key={index} className="project">
                <h3>{project}</h3>
                <img key={index} src={`../img/${imageUrl[index]}.png`} alt={project}/>
                <a role="button" className="btn" href={`https://${project}`} target="_blank" rel="noopener noreferrer">Github</a>
                </div>
              </div>
            ))}
            {/* experiment train */}

Answer 2

假设数组的长度相同，则有以下选择：

映射到一个数组，并使用index属性访问两个数组。
创建另一个数组，该数组具有与其他数组组合的信息。

1。

let names = [];
let images = [];

for (let i = 0; i < names.length; i++) {
    console.log(names[i], images[i]);
}

2。

let names = [];
let images = [];
let combined = [];

for (let i = 0; i < names.length; i++) {
    combined.push({
        name: names[i],
        image: images[i]
    });
}

，现在使用combined数组。

Answer 3

一种更好的方法是维护如下填充的对象数组

const data = [
{projectText: 'a',imageUrl: 'http://linka.com'},
{projectText: 'b',imageUrl: 'http://linkb.com'}
]

遍历此数组将使您可以访问所需的两个字段。此外，如果需要，您可以添加额外的项目而无需麻烦。

我们可以在js中同时映射两个数组吗？

3 个答案:

1。

2。