reactjs 一次onclick中的两个setState函数

vsikbqxv 于 2023-03-17 发布在 React

关注(0)|答案(2)|浏览(122)

**我尝试在一次onclick中调用两个函数，但是只有第一个函数设置状态。**根据其他答案中的解决方案，我尝试调用一个函数，然后调用Add（）和Del（）函数，但是没有成功。

这是我的代码：

const [obj, setObj] = useState(['door1','mc','start'])
    
    const Add = (a) => {
        var newObj = [...obj]
        a.map((i) => newObj.push(i))
        console.log(newObj)
        setObj(newObj)
        console.log(obj)
    }

    const Del = (d) => {
        const newObj = obj.filter((o) => o!=d)
        console.log(newObj)
        setObj(newObj)
    }

    return (
        <div class="main">
            {obj.includes('start') && <button className="btn1" onClick={() => {Add(['text1']);Del('start')}} >Start</button>}
            {obj.includes('text1') && <div className="text text1" onClick={() => {Del('text1');Add(['text2'])}}>I've been trapped here for hours</div>}
        </div>
    )

具体而言，本部分：

{obj.includes('start') && <button className="btn1" onClick={() => {Add(['text1']);Del('start')}} >Start</button>}

如何在一次onclick中设置状态两次？

reactjs

来源：https://stackoverflow.com/questions/71006608/two-setstate-functions-in-one-onclick

2条答案

按热度按时间

nhaq1z211#

您可以在return语句之前创建一个handleClick函数，并将此函数添加到按钮的onClick中，如下所示：

const handleClick = () => {
    Add(["text1"])
    Del("start")
}

<button className="btn1" onClick={handleClick}>
    Start
</button>

赞(0）回复(0）举报 2023-03-17

uqdfh47h2#

我所做的是一个变通方法，并不是对我的问题的直接回答，但它起作用了。我创建了一个新函数，它完成了两个单独函数（Add（）和Del（））所做的事情，然后调用了它。

const delAddObj = (d,a) => {
        console.log(d,a)
        var newObj = [...obj]
        if (d!=0) {
            newObj = obj.filter((o) => o!=d)
        }
        if (a!=0) {
            newObj.push(a)
        }
        setObj(newObj)
    }

它有两个参数，一个用来添加，另一个用来删除，如果我只需要添加，我就传入0而不是第二个参数，删除也是如此。
如果你有一个更优雅的解决方案，我希望你能提供它作为一个答案。

赞(0）回复(0）举报 2023-03-17

我来回答

reactjs 一次onclick中的两个setState函数

2条答案

相关问题

热门标签

最新问答