合并两个 useState 值的最简单方法

Question

我有一个 react native 钩子，其中 trips 必须在每次将 createdTrips 添加到状态时更新：

        const [trips, setTrips] = useState([]);
        
        function fetchCreatedTrips() {
            try {
                API.graphql(graphqlOperation(onCreateTrip)).subscribe({
                    next: (result) => {
                        console.log(result);
                        const updatedTrips = [...trips, result.value.data.onCreateTrip]
                        setTrips(updatedTrips)
                    }
                })
            } catch (err) { console.log(err) }
        }
    
  

现在，当我第一次打开屏幕时，它会呈现列表中的所有 trips 项目。 但是，使用当前代码，在我创建行程并返回该屏幕后，它当前不会返回所有行程 + 新创建的行程，而是仅返回一个行程，即新创建的行程。我怎样才能返回列表中的所有项目？提前抱歉，我是初学者。

Answer 1

在为效果设置新状态时，您应该包含之前的行程值。您可以使用展开运算符来做同样的事情。

const createdTrips = [result.value.data.onCreateTrip];
setTrips([...createdTrips, ...trips]);

或者更好地将新创建的行程合并到updateTrips变量中，然后设置为状态值，

const udpatedTrips = [...trips,result.value.data.onCreateTrip];
setTrips(udpatedTrips);

您的代码中的问题是您同时触发了这两个方法，并且可能存在竞争条件，因此您会在屏幕上看到随机更新。

理想情况下，您需要在 API 调用和状态更新中引入一些一致性。所以首先 fetchTrips()->then->fetchCreatedTrips()。试试下面的代码，我不会立即在 fetchTrips() 中更新状态，而是将结果传递给 fetchCreatedTrips() ，它会完成 API 调用并一起更新状态。

const [trips, setTrips] = useState([]);
    
useEffect(() => {
    fetchTrips();
  }, [])


   async function fetchTrips() {
    try {
      const tripData =  await API.graphql(graphqlOperation(listTrips));
      const trips = tripData.data.listTrips.items
      fetchCreatedTrips(trips);
      
    } catch (err) { console.log(err) }
  }

function fetchCreatedTrips(fetchedTrips) {
    try {
        API.graphql(graphqlOperation(onCreateTrip)).subscribe({
            next: (result) => {
                console.log(result);
                const updatedTrips = [...fetchedTrips,...updatedTrips];
                setTrips(updatedTrips)
            }
        })
    } catch (err) { console.log(err) }
}

PS：请正确处理异常。