如何将完整数组添加到useState变量？retrievedItems为空求助

Hey there, let's figure out why your retrievedItems isn't updating as expected! I spotted a couple of key issues in your code that are causing this problem:

Problem Breakdown #

1. Async setState behavior + overlapping state updates #

React's setState is asynchronous, and when you call it back-to-back like you're doing, both calls rely on the original state value (the empty array) at the time the function runs. That means your second setRetrievedItems call overwrites the first one completely—so the first update never actually sticks.

Take this part of your code:

setRetrievedItems([...retrievedItems, retrievedFilter]);
retrievedFilter = 0; // This line does nothing useful, it's just a local variable
setRetrievedItems([...retrievedItems, newFilter]);

The first call tries to add retrievedFilter to the array, but since setState hasn't updated the state yet, the second call uses the original empty array again. By the time React processes these updates, only the second one gets applied.

Also, the console.log('retrieved items: ', retrievedItems) right after won't show the new state—since setState is async, the state doesn't update until after the function finishes running. Only the console.log in your useEffect will show the correct, updated value.

2. Adding an entire array as a single element #

Your retrievedFilter is already an array (["da vinci","paris", "london"]), but you're adding it to retrievedItems as a single element. This would create a nested array like [["da vinci","paris", "london"]] instead of flattening the elements into the main array, which is probably not what you want.

Fixes to Try #

Update your addToFilter function to use functional updates (so you always work with the latest state) and properly flatten your retrievedFilter elements:

const addToFilter = newFilter => {
  const retrievedFilter = ["da vinci","paris", "london"];
  console.log(retrievedFilter);
  
  if (retrievedFilter.length > 0) {
    // Use functional update to get the latest state
    setRetrievedItems(prevState => [
      ...prevState, 
      ...retrievedFilter, // Spread the array to add each element individually
      newFilter
    ]);
  } else {
    // Same functional update pattern here for consistency
    setItems(prevState => [...prevState, newFilter]);
  }
  
  // Note: These logs will show the OLD state, check useEffect for updates
  console.log('items are: ', items);
  console.log('retrieve filter', props.retrievedFilter);
  console.log('retrieved items (old state): ', retrievedItems);
};

Bonus: Fix the deleteFilter function #

You're directly mutating the state array with items.splice(index, 1)—this is a big no-no in React, since state should always be immutable. Update it to create a new array instead:

const deleteFilter = index => {
  // Create a copy of the array and remove the target element
  const updatedItems = [...items];
  updatedItems.splice(index, 1);
  setItems(updatedItems);
  
  // If you need to delete from retrievedItems instead, use this pattern:
  // setRetrievedItems(prevState => prevState.filter((_, i) => i !== index));
};

Quick Logic Note #

Your render code switches between items and props.retrievedFilter based on !props.retrievedFilter, but your deleteFilter only modifies the items state. This could lead to confusing behavior if props.retrievedFilter is present—make sure your state management is consistent here!

After making these changes, your retrievedItems should update correctly, and you'll see the full array in your useEffect console log.

内容的提问来源于stack exchange，提问作者akano1