如何在某些行中为用户绘制动态 table 和输入？

Question

我想绘制一个包含项目列表的 table，并为每个项目输入数据。我设法绘制 table 并从 get 请求中呈现项目。目标是为不同行中的每个项目获取输入。但是，由于项目是使用映射函数呈现的，因此当用户在输入中键入内容时，它会呈现在所有行中。我需要它只在各自的行上呈现。我明白为什么会这样，但我不知道该怎么做。我是 React 的新手，所以希望能提供一些帮助。

渲染 table

的代码

<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>

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

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_quantities:

，而不是只存储一个 sweet_quantity 状态

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>

                        ....

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

如何在某些行中为用户绘制动态 table 和输入？

How to draw a dynamic table with inputs for the user in some rows?

reactjs

react-bootstrap

bootstrap-4

react-hooks