如何在某些行中为用户绘制带有输入的动态表？

Question

我想要绘制一个包含项目列表的表，并为每个项目提供输入。我设法绘制了表，并呈现了来自get请求的项。目标是在不同的行中获取每一项的输入。但是，由于项是使用map函数呈现的，所以当用户在输入中键入某项时，它将在所有行中呈现。我需要它只在其各自的行上被呈现。我明白为什么会发生这种事，但我不知道怎么做。我是新来的，所以我会感谢你的帮助。

表的呈现代码

<div className="d-flex justify-content-center card card-body border border-5 border-primary">
                <div className="table table-striped text-primary table-container">
                    <thead className="border border-light">
                    <tr>
                        <th>Nombre</th>
                        <th>Sabor</th>
                        <th>Precio</th>
                        <th>Cantidad</th>
                        <th>Empaque</th>
                        <th>Instrucciones Adicionales</th>
                    </tr>
                    </thead>
                    <tbody>
                    {sweets.map(sweet => (
                        <tr key={sweet.sweet_id}>
                            <td>{sweet.s_name}</td>
                            <td>{sweet.s_flavor}</td>
                            <td>{sweet.s_price}</td>
                            <td>
                                <input
                                    type="text"
                                    onChange={e => set_sweet_quantity(e.target.value)}
                                    value={sweet_quantity}
                                    className="form-control"
                                />
                            </td>
                            <td>
                                <input
                                    type="number"
                                    onChange={e => set_sweet_package(e.target.value)}
                                    value={sweet_package}
                                    className="form-control"
                                />
                            </td>
                            <td>
                                <input
                                    type="text"
                                    onChange={e => set_additional_instructions(e.target.value)}
                                    value={additional_instructions}
                                    className="form-control"
                                    placeholder='N/A'
                                />
                            </td>
                            <td>
                                <button className="btn btn-primary btn-sm btn-block"
                                        onClick={() => handleItemSweets(sweet.sweet_id)}
                                >
                                    Añadir a la orden
                                </button>
                                <button
                                    className="btn btn-danger btn-sm btn-block btn-delete"
                                >
                                    Remover
                                </button>
                            </td>
                        </tr>
                    ))}
                    </tbody>
                </div>
            </div>

用于管理输入和get请求的代码

const handleItemSweets = async (id) => {
        set_sweet_id(id)
        console.log(sweet_id)
        const res = await fetch(API + '/create_sweet_item', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                sweet_quantity,
                additional_instructions,
                sweet_package,
                sweet_id
            })
        })
        const data = await res.json();
        console.log(data);

        set_sweet_quantity('');
        set_additional_instructions('');
        set_sweet_package('');
        set_sweet_id('');
    }

    // Variable para guardar los dulces en una lista desde el json
    const [sweets, set_sweets] = useState([]);
    const getSweets = async () => {
        const res = await fetch(API + "/get_all_sweets");
        const data = await res.json();
        set_sweets(data);
        console.log(data);
    };

[Error visualization][1]


  [1]: https://i.stack.imgur.com/ldd1x.png

Answer 1

不只是存储一个sweet_quantity状态，您可以将其转换为一个对象来存储所有的sweet_quantities。

const [sweet_quantities, set_sweet_quantities] = useState({})

当您收到API响应时，可以使用与甜的id关联的缺省数量值填充该对象

const getSweets = async () => {
        const res = await fetch(API + "/get_all_sweets");
        const data = await res.json();
        set_sweets(data);

        ...

        // Set default quantities in state for each item
        const quantities = data.reduce((a, b) => ({ ...a, [b.sweet_id]: b.quantity}), {}) 
        set_sweet_quantities(quantities)
    };

然后，您可以通过甜的id引用选定的状态，并相应地更新它：

{sweets.map((sweet) => (
                        <tr key={sweet.sweet_id}>
                            <td>{sweet.s_name}</td>
                            <td>{sweet.s_flavor}</td>
                            <td>{sweet.s_price}</td>
                            <td>
                                <input
                                    type="text"
                                    onChange={e => set_sweet_quantities({...sweet_quantities, [sweet.sweet_id]: e.target.value})}
                                    value={sweet_quantities[sweet.sweet_id]}
                                    className="form-control"
                                />
                            </td>

                        ....

然后，您可以对其他值重复此逻辑。