必须点击两次 OnPress React Native答案

【问题标题】：Have to click twice OnPress React Native必须点击两次 OnPress React Native
【发布时间】：2021-12-08 09:43:06
【问题描述】：

我的 onPress 函数有问题，我必须在每个 TouchableOpacity 上单击两次才能更改样式。在网络开发上它的工作很好，我使用 expo ios iPhone 来查看应用程序，但它不像在网络上那样工作。我不知道为什么，但我必须点击两次，然后它就会改变。有什么帮助吗？

const Test = ({ navigation }) => {
  const itemsData = GetGroceryIngridients();

  const [items, setItems] = useState(itemsData);

  const handleSelectItem = (selectedItemIndex) => {
    const itemsToSelect = items.map((item, index) => {
      if (selectedItemIndex === index) item.pressed = !item.pressed;
      return item;
    }, []);

    setItems(itemsToSelect);

    // your logic here
    AddToPanetry(items[selectedItemIndex].label);
  };

  const renderItem = (item, index) => {
    const isSelected = items[index].pressed;

    return (
      <TouchableOpacity
        style={[styles.button, isSelected && styles.selectedButton]}
        onPress={() => handleSelectItem(index)}
      >
        {
          <Image
            style={{ height: 110, width: 100, borderRadius: 50 }}
            source={item.image}
          />
        }
        <Text>{item.name}</Text>
      </TouchableOpacity>
    );
  };

  return (
    <View>
      <ScrollView>
        <TouchableOpacity
          onPress={() => navigation.navigate("IngridientsScreen")}
        >
          <Ionicons
            style={{ width: 50, height: 50 }}
            name="arrow-back-circle-sharp"
            size={50}
            color="#eb344f"
          />
        </TouchableOpacity>
        {itemsData.map((item, index) => renderItem(item, index))}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  button: {
    opacity: 1,
    padding: 20,
  },
  selectedButton: {
    opacity: 0.5,
  },
});

export default Test;

我的 GroceryIngridients 数组 =

const GroceryIngridients = [
  {
    label: "pasta",
    image: require("../assets/Pastaa.jpg"),
    pressed: true,
  },
  {
    label: "eggs",
    image: require("../assets/eggs.jpg"),
    pressed: true,
  },
  {
    label: "white_flour",
    image: require("../assets/whiteflour.jpg"),
    pressed: false,
  },
  {
    label: "rice",
    image: require("../assets/rice.jpg"),
    pressed: false,
  },
  {
    label: "breadcrumbs",
    image: require("../assets/breadcrumbs.jpg"),
    pressed: false,
  },
];

欢迎任何其他显示方式！

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

似乎是一个小错误（应该循环状态）

改变这个

{itemsData.map((item, index) => renderItem(item, index))}

到这里

{items.map((item, index) => renderItem(item, index))}

【讨论】：