在 React 中迭代数组答案

【问题标题】：Iterate over array in React在 React 中迭代数组
【发布时间】：2021-07-05 18:08:22
【问题描述】：

我想遍历一个包含 url 结尾的数组，这样我就可以“连接”到主站点域，目的是获得一个功能齐全的 url（即www.mainUrlDomain.com/some-url）

这是我的代码：

<div>
                <table>
                    <tbody>
                        <tr>
                            <th>Name</th>
                            <th>City</th>
                            <th>Code</th>
                            <th>Symbol</th>
                        </tr>
                        {data.map(data => (
                            <tr key={data.code}>
                                <td>
                                    <Image
                                        src={`${mainUrlDomain}/${data.code.toLowerCase()}.png`}
                                        width={30}
                                        height={20}
                                    />
                                </td>
                               {landingPagesKeys.includes(`${data.code}`)
                               ? 
                               <Link
                               href={`${mainUrlDomain}/${landingPages}`}
                           >    
                               <td>
                                   <a>{data.name}</a>
                               </td>
                           </Link> : <td>{data.name}</td>}

                                <td>{data.code}</td>
                                <td>{data.symbol}</td>
                            </tr>
                        ))})
                    </tbody>
                </table>
            </div>

我尝试添加一种方法来迭代 landingPages 数组，如下所示：

{landingPagesKeys.includes(`${data.code}`)
                                   ? 
{landingPages.map(data => (
                                   <Link
                                   href={`${mainUrlDomain}/${data`}
                               >    
                                   <td>
                                       <a>{data.name}</a>
                                   </td>
                               </Link> )} : <td>{data.name}</td>}
    
                                    <td>{data.code}</td>
                                    <td>{data.symbol}</td>
                                </tr>
                            ))})

不幸的是，它没有按预期显示数组数据，其中包含所需 url 的结尾（即 some-url）和 url 域之后的 landingPages，因为第一个代码示例显示了整个数组。

如何通过数组进行映射，获取landingPages包含的每个单独的url？

【问题讨论】：

数据看起来是一个对象。您的 href 的第二个公园应该可能是 data.something
我已经通过这样做将它变成了一个数组const landingPages = [] Object.values(data).forEach(val=>landingPages.push(val))
即使是数组，也不应该在这里插值href={`${mainUrlDomain}/${landingPages}`}

标签： javascript arrays reactjs

【解决方案1】：

您可以使用filter 函数来过滤数组中的数据。

landingPages.filter(data => landingPagesKeys.includes(`${data.code}`)).map(data => <div>...</div>)

【讨论】：