无法更改我们以更改组件状态

Question

这是我的addBlog组件的代码。

import React, { useState } from "react";

function AddBlogs() {

const[state, setState] = useState({blogs:[]})


const AddAnother = () => {
    return (
        <div>
            <label>Topic</label>
            <input></input>
            <button onClick={addblog}>Add another topic</button>
        </div>
    );
}

const addblog = () =>{
    setState({
        blogs:[...state.blogs,<AddAnother></AddAnother>]
    });
    console.log("Hello");
}

return (
    <div>
        <form>
            
            <div>
                <label>Topic</label>
                <input></input>
                <button onClick={addblog}>Add another topic</button>
            </div>
            <div>
                {state.blogs}
            </div>
        </form>
    </div>
);
}
export default AddBlogs;

当我单击该添加另一个主题按钮 addanothere 组件仅需0.5秒或更少。有什么解决方案吗？

Answer 1

我看到几件事会引起问题。首先，当您更新状态时，您不应使用当前状态。取而代之的是，您应该使用接受旧状态作为第一个参数的函数的setState，例如：

const addblog = () => {
    setState((oldState) => {
        return { blogs: [...oldState.blogs, <AddAnother />] };
    });
    console.log("Hello");
};

不过，这不会解决您的问题。您看到的问题是由于您在组件中没有钥匙。因此，请尝试一下：

const addblog = () => {
    setState((oldState) => {
        return { blogs: [...oldState.blogs, <AddAnother key={oldState.blogs.length} />] };
    });
    console.log("Hello");
};

正如David指出的那样，该表格也在发布，这也导致了部分问题。

Answer 2

因为＆lt; form＆gt;正在发布。如果您不需要 这是实际的＆lt; form＆gt;，则完全删除该元素。但是，如果出于某种原因要保留该元素，请更改按钮类型：

<button type="button" onClick={addblog}>Add another topic</button>

默认情况下a ＆lt; button＆gt;是类型提交，除非另有说明。

---

编辑：此外，在这里回答，您需要更改设置状态的方式要使用回调过载：

setState((oldState) => {
    return { blogs: [...oldState.blogs, <AddAnother key={oldState.blogs.length} />] };
});

在最多的情况下，无论您直接设置状态还是使用基于先前状态设置的回调，都没有什么区别。例如，在循环中排队多个状态更新时，通常会使用后者。但是您在这里有一个边缘箱。

您的addanother组件内部引用addblog的“陈旧版本”，该始终引用原始状态。更改为setState的回调版。

其他方法是重组代码以删除循环依赖性，重构组件中的离散代码，使用usecallback之类的工具来定义对状态值等有依赖性的功能。