Question

我需要从另一个文件（函数）中更新数据（状态）（提升状态）。根据我的研究，有很多方法可以做到这一点。

以下是我能想到的一些方法。

然而，我真的不知道哪个是最好的。

function ListOFOrders() {
    const [ listOrders, setListOrders ] = useState([])

    //Method 1
    const addingOrders = (data) => {
        let temp_list = listOrders
        temp_list.push(data)
        setListOrders(temp_a)
    }

    //Method 2 
    const addingOrders = (data) => {
        setListOrders([...listOrders, data])
    }

    //Method 3
    const addingOrders = (data) => {
        setListOrders(prevListOrders => [...prevListOrders, {...data}])
    }

    return (
    <div>
        <OrdersForm addingOrders ={addingOrders}/>
        <OrdersList orders={listOrders}/>  
    </div>
        )
    }

method 1 来自纯 JavaScript。它不起作用，因为页面不会再次重新渲染以将新数据更新到屏幕。我在函数结束时做了 console.log 来检查和数据确实添加（更新）。我真的不知道为什么。请帮忙

method 2 和 method 3 正在工作。但是 method 2 必须调用当前状态的 listOrders 而另一个则不需要。我应该使用哪一种？

供您参考，data 的 addingOrders 可能是这样的

{
    id : 1
    title : 'a_title'
}

Answer 1

方法 1 不应该使用（并且通常不起作用），因为在 React 中永远不应该改变状态。 .push 改变现有数组的状态。

方法 2通常没问题，但偶尔会出现问题，如果它关闭的 listOrders 数组处于过时的闭包中 - 例如，如果 {{1 }} 在 API 调用后被调用，同时状态可能已经改变。在这种情况下，您可能会在 API 调用初始化和完成之间丢失之前添加到 addingOrders 的项目。

解决过时闭包问题的方法是方法3：使用回调形式，其第一个参数将是当前有状态的值。

如果您确定不会异步调用 listOrders，那么方法 2 就可以了 - 方法 3 是不必要的。

我看到您也在方法 3 中执行 addingOrders。如果 {...data} 可能在其他地方发生变异，这将很有用 - 创建它的浅拷贝可以减少外部变异导致问题的机会。

比较从提升状态来更新数据（状态）的方法，应该还是不应该？

1 个答案: