React Native Selected item 未將狀態反映到 UI

Question

我正在嘗試開發一個組件，它應該顯示我的數據庫中的所有成分，但狀態沒有按預期更新。

變量：

  const image = require('../../assets/backgroundMeal.png');
  const [name, setName] = useState('')
  const [ingredients, setIngredients] = useState([])
  const [recipes, setRecipes] = useState([])
  const [ingredientList, setIngredientList] = useState([{id:null, name:null, isSelected:false}])

API調用：

useEffect(() => {
    let recipeRequest = 'http://192.168.0.3:3333/report'
    let ingredientsRequest = 'http://192.168.0.3:3333/ingredients'
    recipeRequest = axios.get(recipeRequest)
    ingredientsRequest = axios.get(ingredientsRequest)
        axios.all([recipeRequest, ingredientsRequest])
          .then(axios.spread((...responses) => {
            setRecipes(responses[0].data)
            setIngredientList(responses[1].data)
          }))
          .catch(function (error) {
            console.log('API CALL - recipe/ingredient - error: ', error);
          })
    
  },[ingredientList])

變量“ingredientsRequest”包含所有成分。

這是加入“isSelected”和“ingredientList”的變量

  const [allItems, setAllItems] = useState([ingredientList]);
  const selectedIngredient = (item) => {
    let temp = allItems.filter(parentItem => parentItem.id !== item.id)
    item.isSelected = !item.isSelected;
    temp = temp.concat(item);
    temp.sort((a, b) => parseInt(a.id) - parseInt(b.id))
    
    setAllItems(temp)
    console.log('## allItems', allItems)

這是第一個問題，我將形狀“id”和“name”iguals 的狀態聲明為null，並且useEffect axios 調用應該更新“setIngredientList”和“ingredientList”，但是console.log我調用之前的“返回”顯示對象仍然具有空值到具有空值的 ID 和 NAME 變量。 它應該在我在 useEffect 的 axios 調用中更新，為什么不呢？

“allItems”變量中的 console.log 結果。

數組 [ 對象 { "id": null, "isSelected": false, "name": null, },

單擊 Flatlist 組件后，它會正確更新“isSelected”狀態，但不會顯示所有“ingredientList”狀態，即使考慮到“allItems”變量使用 useState([ingredientList])，所以我認為它應該具有成分列表形狀，對嗎？

<FlatList
  horizontal
  bounces={false}
  data={allItems}
  renderItem={({ item, index }) => (
  <TouchableOpacity key={item.id} onPress={() => selectedIngredient(item, index)}>
    <Card key={index}>
      <Text key={item.title} style={styles.titleText}>{item.name}</Text>
      <Text key={item.title} style={styles.titleText}>{item.isSelected}</Text>
      <Text key={item.title} style={styles.titleText}>{item.isSelected?(
      <Text style={{color: "red"}}>{"Not Selected"}</Text>
      ) : (
      <Text style={{color: "green"}}>{"Selected"}</Text>
      )}</Text>
      <ImageBackground key={item.illustration} source={item.illustration} style={styles.cardImage}> 
      </ImageBackground>
    </Card>
  </TouchableOpacity>
  )
  }
  keyExtractor={(item) => item.index}
/>

有人可以幫我嗎？ 非常感謝。

Answer 1

試試這個，它會在選擇時反映 UI

const selectedIngredient = (item, index) => {
    const tempAllItems = [...allItems];
    tempAllItems[index].isSelected = !item.isSelected;
    
    setAllItems(tempAllItems);
}