使用 id 在 React 中删除状态数组的对象

Question

当我 console.log(id) 它给我数组中对象的索引，而不是我试图用创建对象的函数分配给它的 id。所以我的问题是如何从我的数组对象中提取一个特定的键值对并使用它来确保我删除了正确的对象？

而且我对编程真的很陌生。

import logo from "./logo.svg";
import "./App.css";
import React, { useState } from "react";
import { nanoid } from "nanoid";

function App() {
    const [text, setText] = useState([]);
    const [textMaster, setTextMaster] = useState({
        paragraph: "",
        id: nanoid(),
    });

    const handleSubmit = (e) => {
        e.preventDefault();
        const copy = [...text];
        copy.push(textMaster);
        setText(copy);
    };

    const handleClick = (e) => {
        handleSubmit(e);
    };

    const handleClickDelete = (id) => {
        console.log(id);
        const newText = text.filter((text) => text.id !== id);
        setText(newText);
    };

    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.js</code> and save to reload.
                </p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>

                <form onSubmit={handleSubmit}>
                    <label>
                        Essay:
                        <textarea
                            name="item"
                            key={textMaster.id}
                            type="text"
                            value={textMaster.paragraph}
                            onChange={(e) => setTextMaster(e.target.value)}
                        />
                    </label>
                    <button onClick={(e) => handleClick(e)}>
                        Add new text
                    </button>
                </form>
                <ul>
                    {text.map((item, id) => {
                        return (
                            <>
                                <li key={id}>{item}</li>
                                <button onClick={() => handleClickDelete(id)}>
                                    Delete
                                </button>
                            </>
                        );
                    })}
                </ul>
            </header>
        </div>
    );
}

export default App;

Answer 1

map 函数返回索引作为第二个参数，text 不是一个对象，它不会包含id。

{
    text.map((item, index) => {
        return (
            <>
                <li key={index}>{item}</li>
                <button onClick={() => handleClickDelete(index)}>
                    Delete
                </button>
            </>
        );
    })
}

然后，在删除函数中使用索引从数组中删除文本，用新数组更新状态。

const handleClickDelete = (index) => {
    const newTexts = [...text]
    newTexts.splice(index, 1) // To remove the index 
    setText(() => newTexts);
};