React 中没有识别关键道具

Question

我有一个名为 ListSuppliers 的组件，其中有一个 bootstrap 模态，它包含一个 table，我想从 postgresql [=25] 填充那个 table =].以下是我在模态片段部分中的内容：

<div className="modal fade" id="myModal">
            <div className="modal-dialog">
                <div className="modal-content">
                    <div className="modal-header d-flex justify-content-center">
                        <h4 className="modal-title">Supplier Name</h4>
                    </div>
                
                    <div className="modal-body">
                        <h3 className="text-center mt-2">Search Bar</h3>
                        <form>
                            <input 
                            type="text" 
                            className="form-control"      
                            />
                        </form>
                        <table className="table mt-5">
                            <thead>
                                <tr>
                                    <th>Supplier Name</th>
                                    <th>Delete</th>
                                </tr>
                            </thead>
                            <tbody>
                                {suppliers.map(supplier => (
                                    <tr key={supplier.supplier_id}>
                                        <td>{supplier.supplier_name}</td>
                                        <td><button className="btn btn-danger" onClick={()=> deleteSupplier(supplier.supplier_id)}>Delete</button></td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                
                
                    <div className="modal-footer">
                        <button type="button" className="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

这是我的 ListSuppliers 组件和路线：

const ListSuppliers = () => {
    const [suppliers, setSuppliers] = useState([]);


     //Populate modal table function

     const getSuppliers = async () => {
        try {
            
            const response = await fetch("http://localhost:5000/supplier");
            const jsonData = await response.json();

            setSuppliers(jsonData);


        } catch (err) {
            console.log(err.message);
        }
    }


//routes from index.js file
app.get("/supplier", async (req, res) => {

    try {

        const allSuppliers = await pool.query("SELECT supplier_name FROM supplier ORDER BY supplier_id ASC");
        res.json(allSuppliers.rows);

    } catch (err) {
        console.error(err.message);
    }
})

//Delete supplier entry

app.delete("/supplier/:id", async (req, res) => {
    try {
        const {id} = req.params;
        
        const deleteSupplier = await pool.query('DELETE FROM supplier WHERE supplier_id = ', [id]);

        res.json(id);

    } catch (err) {
        console.error(err.message);
    }
})

我的模式按预期显示信息，但我收到此错误：

Warning: Each child in a list should have a unique "key" prop
Check the render method of `ListSuppliers`

我不明白为什么会出现错误，因为我在 table 行中包含了关键道具：

{suppliers.map(supplier => (
 <tr key={supplier.supplier_id}>
   <td>{supplier.supplier_name}</td>
   <td><button className="btn btn-danger" onClick={()=> deleteSupplier(supplier.supplier_id)}>Delete</button></td>
 </tr>
))}

非常感谢任何帮助

Answer 1

检查 supplier_id 是否存在。

最后，试试这个，看看是否出现警告

{suppliers.map((supplier, index) => (
 <tr key={index}>
   <td>{supplier.supplier_name}</td>
   <td><button className="btn btn-danger" onClick={()=> deleteSupplier(supplier.supplier_id)}>Delete</button></td>
 </tr>
))}

React 中没有识别关键道具

Key prop not being recognized in React

postgresql

key

express

reactjs

react-props