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);
}