是否可以映射多个项目？

Question

如何通过用户组件同时为价格和用户映射？我想将价格传递给用户组件。并向单个用户添加单个价格值。

import React from 'react';
import './Userbody.css';
import { useState, useEffect } from 'react';
import User from '../User/User';
import Cart from '../Cart/Cart';


const Userbody = () => {
    const [user, setUser] = useState([]);
    useEffect(() => {
        fetch('https://randomuser.me/api/?results=15')
            .then(res => res.json())
            .then(data => setUser(data.results))
    }, [])
    const [cart, setCart] = useState([]);
    const cartHandler = (user) => {
        const newCart = [...cart, user]
        setCart(newCart)
    }

    let price = [2332, 3183, 9392, 7387, 91822, 82823, 8281, 1123, 9283, 1098, 4323, 8764, 87387, 5746, 8492]

    return (
        <div className='row mt-5'>
            <div className="col-md-8">
                {
                    user.map(el => <User cartHandler={cartHandler} user={el}></User>)
                }
            </div>
            <div className="col-md-4">
                <Cart cart={cart}></Cart>
            </div>
        </div>
    );
};

export default Userbody;

Answer 1

使用index，map闭包的第二个参数：

user.map((user, index) => {
   const price = prices[index];
   return <User cartHandler={cartHandler} user={user} price={price} />
})