时间戳

首页 > 解决方案 > React Native Selected 项目未将状态反映到 UI

javascript - React Native Selected 项目未将状态反映到 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])

变量“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}
/>

有人可以帮我吗？非常感谢。

标签： javascriptreactjsreact-nativestate

解决方案

试试这个，它会反映在 UI 上的选择

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

推荐阅读