Javascript React Native Selected item未将状态反映到UI

我正在尝试开发一个组件，该组件应该显示我数据库中的所有成分，但状态并没有按照预期进行更新

变量：

  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])

变量“IngCreditsRequest”包含所有成分

这是将“isSelected”与“IngreditList”联接的变量

这是第一个问题，我将形状为“id”和“name”的iguals的状态声明为null，并且useEffect axios调用应更新“setIngredientList”和“ingredientList”，但在“return”之前调用的console.log显示，对象的id值为null，name变量的值为null。它应该在我在useEffect的axios调用中更新，为什么不呢

console.log在“allItems”变量处的结果

排列[ 反对{ “id”：空， “isSelected”：错误， “名称”：空， },

单击Flatlist组件后，它正确地更新了“isSelected”状态，但没有显示所有的“IngreditList”状态，即使考虑到“allItems”变量使用useState（[IngreditList]），所以我认为它应该具有IngreditList形状，是吗

<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}
/>

(
SelectedGredient（项目、索引）}>
{item.name}
{item.isSelected}
{item.isSelected(
{“未选定”}
) : (
{“选定”}
)}
)
}
keyExtractor={（项）=>item.index}
/>

---

有人能帮我吗？非常感谢。

试试这个，它会反映用户界面的选择

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

---

const[allItems，setAllItems]=useState（[ingredientList]）；

-成分列表已经是一个列表，因此不需要方括号。请尝试：

const[allItems，setAllItems]=useState（ingredientList）

希望一切都能正常工作，现在开始工作了，非常感谢您的帮助。除了上面提到的解决方案之外，我还删除了更新状态并生成无限循环的'IngreditList'变量。

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