我在返回数组的每个值时遇到问题答案

【问题标题】：I have a problem with returning each value of an array我在返回数组的每个值时遇到问题
【发布时间】：2020-12-12 19:19:53
【问题描述】：

我是 React 和 JavaScript 的初学者。我一直在按照 YouTube 上的教程和我自己的免费代码营学习它们。所以我的问题可能会令人困惑，但我会尽力描述我的问题。

我一直在尝试通过遵循 YouTube 教程并添加我自己的代码来编写一些 React 电子商务网站。但是我在返回对象内的数组的每个值时遇到了一些问题。这就是我的数据的样子。

products: [
        {
        _id: '001',
        image: '/images/v1.jpg',
        category: 'Korea',
        name: 'Vivid',
        artist: 'ADOY',
        price: 60,
        rating: 4.5,
        numReview: 10,
        tracklist: [
            "Lemon", "Porter", "Pool", "Someday", "Domino", "Swim", "Ever", "Ugly", "Moondance", "Away"
        ]
    },
    {
        _id: '002',
        image: '/images/v2.jpg',
        category: 'Korea',
        name: 'Catnip',
        artist: 'ADOY',
        price: 40,
        rating: 4.0,
        numReview: 7
    },...

我已经有一个 map 函数，它确实从另一个组件返回对象的每个值（从 YouTube 教程复制）

import React from 'react';
import data from '../data';
import { Link } from 'react-router-dom';

function HomeScreen (props) {
    return <ul className="products">
                {data.products.map(product => 
                <li>
                    <div className="product">
                        <Link to={'/product/' + product._id}>
                            <img src={product.image} alt="vinyl" className="product-image" />
                        </Link>
                        <div className="product-album">
                            <Link to={'/product/' + product._id}>{product.name}</Link>
                        </div>
                        <div className="product-artist">{product.artist}</div>
                        <div className="product-price">{product.price}</div>
                        <div className="product-rating">{product.rating} Stars ({product.numReview} reviews)</div>
                    </div>
                </li>
                )}
          </ul>
}

export default HomeScreen;

现在在我自己的另一个组件中。我一直在尝试使我的 tracklist 从数组中显示此组件中的有序列表

import React from 'react'
import data from '../data';
import { Link } from 'react-router-dom';

function ProductScreen (props) {

    const product = data.products.find(x => x._id === props.match.params.id);

    return <div>
                <div className="details">
                    <div className="details-image">
                        <img src={product.image} alt="vinyl" />
                    </div>
                    <div className="details-info">
                        <ul>
                            <li>
                                <h1>{product.name}</h1>
                            </li>
                            <li>
                                {product.artist}
                            </li>
                            <li>
                                {product.rating} stars ({product.numReview} reviews)
                            </li>
                            <li>
                                <b>Price: ${product.price}</b>
                            </li>
                            <li>
                                Tracklist: <ol>
                                    {product.tracklist}
                                </ol>
                            </li>
                        </ul>
                    </div>
            </div>
}

export default ProductScreen;

但结果是我只得到 1 个包含所有值的列表 [1]：https://i.stack.imgur.com/KCBMl.png

根据我的初学者知识和理解，到目前为止我尝试的是在这个组件中编写一个这样的函数

    const trackListing = () => {
        data.products.tracklist.map(track =>
            <li>{track}</li>
        )}

但它不会在网站上返回任何结果。谁能告诉我如何解决这个问题？或者我应该学习什么来解决这个问题？对不起，我的英语不好。谢谢！

【问题讨论】：

了解更多不同的Array方法，你就会知道你不需要find()但你需要使用filter()。
你在正确的轨道上（呵呵），但你需要product.tracklist.map( .... )。因为data.products 是一个数组，因此没有.tracklist 属性。
在你的trackListing函数中，你没有返回结果，好像缺少“return”关键字

标签： javascript arrays json reactjs object

【解决方案1】：

问题在于tracklist，您可以使用.map创建li列表如下

import React from 'react'
import data from '../data';
import { Link } from 'react-router-dom';

function ProductScreen (props) {

    const product = data.products.find(x => x._id === props.match.params.id);
    const trackList =  product.tracklist.map(track =>
        <li>{track}</li>
    );

    return <div>
                <div className="details">
                    <div className="details-image">
                        <img src={product.image} alt="vinyl" />
                    </div>
                    <div className="details-info">
                        <ul>
                            <li>
                                <h1>{product.name}</h1>
                            </li>
                            <li>
                                {product.artist}
                            </li>
                            <li>
                                {product.rating} stars ({product.numReview} reviews)
                            </li>
                            <li>
                                <b>Price: ${product.price}</b>
                            </li>
                            <li>
                                Tracklist: <ol>
                                    {trackList}
                                </ol>
                            </li>
                        </ul>
                    </div>
            </div>
}

export default ProductScreen;

【讨论】：

【解决方案2】：

这是因为 const product = data.products.find(x => x._id === props.match.params.id);find这行方法返回了满足条件的第一个元素的值。尝试使用filter

【讨论】：

OP 与一个据称是唯一的 id 匹配，所以我认为他们不想在这里过滤？编辑：据我所知，这个答案完全解决了错误的事情，请参阅我上面的评论。

【解决方案3】：

您可以通过以下方式正确找到相应的产品：
data.products.find(x => x._id === props.match.params.id);

现在您已经有了产品，您想要生成这些对象的列表。您需要从 tracklist 项目生成元素列表。

试试这个：

<li> Tracklist:
    <ol>
        {product.tracklist.map(item => <li key={item}>{item}</li>}
    </ol>
</li>

【讨论】：