一个 onclick 中的两个 setState 函数

Question

我试图在一次点击中调用两个函数，但是只有第一个函数设置状态。按照其他答案的解决方案，我尝试调用一个函数，然后调用 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>}

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

Answer 1

你可以在 return 语句之前创建一个

handleClick

函数，并将这个函数添加到你的按钮的 onClick 中，像这样：

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

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

Answer 2

我所做的是一种解决方法，而不是直接回答我的问题，但它奏效了。我创建了一个新函数，它完成了两个单独函数（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 而不是第二个参数，删除也类似。

如果你有更优雅的解决方案，希望你能提供作为答案。