无法删除特定的反应组件

Question

这是我的add_blog.js文件

import React, { useState } from "react";


function AddBlogs() {

const ADD = () => {
    return (
        <div>
            <label>Topic</label>
            <input></input>
            <label>Content</label>
            <textarea></textarea>
            <button type="button" onClick={deleteContent} value={state.length}> Delete</button>
        </div>
    );
}
const [state, setState] = useState([<ADD key="first"></ADD>]);


const addblog = () => {
    setState([...state, <ADD key={state.length}></ADD>])
}


const deleteContent = (event, key) => {
    setState([...state, state.splice(event.target.value, 1)]);

}

return (
    <div>
        <form>
            <div>
                <label>Add Title</label>
                <input></input>
            </div>
            <div>
                {
                    state
                }

            </div>
            <div>
                <button type="button" onClick={addblog}>Add another topic</button>
            </div>
            <input type="submit" value="publish"></input>
        </form>
    </div>
);
}
export default AddBlogs;

我从此代码中的期望是在我按下删除按钮时删除删除按钮的组件。但是，当我按删除按钮时，它会删除该组件以及下面的每个组件。 有什么解决方案吗？

Answer 1

它不起作用，因为您正在使用 splice 方法是错误的。它返回已删除的值。

您可以这样更改删除功能：

const deleteContent = (event, key) => {
  let indexToRemove = Number(event.target.value);
  setState((prevState) => prevState.filter((elem, index) => index !== indexToRemove));
}

这足以使程序按预期工作