Question

我有一个项目列表，当单击一个项目时，它导航到显示选项列表的模式。我正在尝试增加每个选项内的计数器，但当我退出模态屏幕并返回到它时，它却按预期工作，但选项计数器未重置。

const myOptions = [
  { id: '001', name: 'option 001', counter: 0 },
  { id: '002', name: 'option 002', counter: 0 },
];

function ModalScreen({ route, navigation }) {
  const [options, setOptions] = useState(myOptions);

  let tempArr = [...myOptions]; 
  // Array where I increment the counter, before passing it to setOptions(tempArr)

  useEffect(() => {
    return () => {
      // because of let tempArr = [...myOptions]; changes in tempArr are copied 
      in myOptions. I want to reset myOptions when I exit the component
      console.log(options); 
      console.log(myOptions) // both output are identical
    };
  }, []);
  return (
    <View>
      <Text style={{ fontWeight: 'bold', marginBottom: 15 }}>
        Click on an option to increment counter by 1
      </Text>
      <FlatList
        keyExtractor={item => item.name}
        extraData={tempArr}
        data={options}
        renderItem={({ item, index }) => (
          <TouchableOpacity
            onPress={() => {
              tempArr[index].counter++;
              setOptions(tempArr);
            }}>
            <Text>
              {item.name} - counter: {item.counter}
            </Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

我在这里做了一个演示： https://snack.expo.io/@oliviermtl/carefree-marshmallows

我花费了整整一天的时间试图找出答案...让我知道是否需要更多解释谢谢

Answer 1

更改

  useEffect(() => {
        return () => {
          console.log(options); 
          console.log(myOptions)
        };
      }, []);

到

 useEffect(() => {
    return () => {
      myOptions[0].quantity = 0;
      myOptions[1].quantity = 0;
    };
  },[]);

我正在做的是，每当用户关闭或退出模态时，将数量值更改为0。希望这会有所帮助！

React-Native：useState更新数组内的对象

1 个答案: