Question

根据当前URL，在数组中找到匹配的“ url”值，并为该值重复子数组。在下面的示例中，子数组是“图像”。

示例JSON文件

auto

带有中继器的示例页面

请注意：这不起作用，我将其包括在内以表明我要挂断电话。它重复所有子数组元素“ image”并呈现5个项目。

所需结果

用于... site.html / edible-vegetables渲染

const Food = [
    {
        'title': 'Vegetables',
        'url': 'edible-vegetables',
        'image': '/img/vegetables.jpg',
        'images': [
            {
                'name': 'Carrot',
                'image': '/img/carrot.jpg'
            },
            {
                'name': 'Spinach',
                'image': '/img/spinach.jpg'
            }
        ]
    },
    {
        'title': 'Fruit',
        'url': 'edible-fruit',
        'image': '/img/fruit.jpg',
        'images': [
            {
                'name': 'Apple',
                'image': '/img/apple.jpg'
            },
            {
                'name': 'Pear',
                'image': '/img/pear.jpg'
            },
            {
                'name': 'Cherry',
                'image': '/img/cherry.jpg'
            }
        ]
    }
]

用于... site.html / edible-fruit渲染

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

import Food from './Data/Food';

class Gallery extends Component {

    state = {
        Food
    };

    render() {

        const foodRepeater = this.state.Food.map((item) => 
            item.images.map((images, index) => 
                <li key={index}>
                    <h1>{images.name}</h1>
                    <img src={images.image} alt="{images.name}" />
                </li>
            )
        )

        return (
            <>
                <section></section>
                <section>
                    <ul>
                        {foodRepeater}
                    </ul>
                </section>
                <section></section>
            </>
        ); 
    }

}

export default Gallery;

Answer 1

如果item.url与您在食品直放站中寻找的商品相匹配，则您将不得不在第一张地图中进行比较。假设您有一个state元素，知道您所在的网址。

const foodRepeater = this.state.Food.map((item) => 
        this.state.url === item.url ? item.images.map((images, index) => 
            <li key={index}>
                <h1>{images.name}</h1>
                <img src={images.image} alt="{images.name}" />
            </li>
        ) : ''
    )

此代码将检查您的状态URL是否与item.url相同，并且是否执行item.images.map（）

希望这会有所帮助。

Answer 2

创建一个功能组件（编辑：首先过滤URL的数组）：

 export const FoodRepeater = (props) => {
    return (
        props.food.filter(v => props.url === v.url).map((item) => 
             item.images.map((images, index) => 
                <li key={index}>
                    <h1>{images.name}</h1>
                    <img src={images.image} alt="{images.name}" />
                </li>
            );
    )
}

然后将其导入到Gallery组件中：

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import {FoodRepeater} from './FoodRepeater';

import {Food} from './Data/Food';

class Gallery extends Component {

    render() {

        return (
            <>
                <section></section>
                <section>
                    <ul>
                       <FoodRepeater food={Food} url='edible-vegetables' />
                       <FoodRepeater food={Food} url='edible-fruit' />
                    </ul>
                </section>
                <section></section>
            </>
        ); 
    }

}

export default Gallery;

反应：根据URL渲染子数组中的重复元素

2 个答案: