object state 更改時 React Native 屏幕不更新

Question

我正在使用react-native來構建我的應用程序。

主屏在state中存儲了一個object：

const [menu, setMenu] = React.useState({name: "Pizza", toppings: {chicken: 2}})

我將這個 state 顯示給用戶：

<Text>Qty: {menu.toppings.chicken}</Text>

我有一個更新 state 的計數器，更新 state 的 loaginc 是：

const handleChange = (action: string) => {
    if (action === 'add') {
      setMenu((prev) => {
        prev.toppings.chicken += 1
        return prev
      })
    } else if (action === 'subtract') {
      setMenu((prev) => {
        prev.calendar.booking -= 1
        return prev
      })
    }
}

我的 function 工作正常，並根據我的需要將 state 更改為（通過控制台日志記錄驗證）。 但是，這些更改並未反映在我顯示數量的<Text>中。

Answer 1

您應該更多地研究淺比較：

淺比較如何在反應中工作

在您的情況下，您可以嘗試以下代碼：

const handleChange = (action: string) => {
        if (action === 'add') {
            setMenu((prev: any) => {
                prev.toppings.chicken += 1;
                return { ...prev };
            });
        } else if (action === 'subtract') {
            setMenu((prev: any) => {
                prev.calendar.booking -= 1;
                return {...prev};
            });
        }
    };

Answer 2

這是您的解決方案，它因嵌套對象而變得復雜：

  const handleChange = () => {
setMenu((prevState) => ({
  ...prevState,
  toppings: { chicken: prevState.toppings.chicken + 1 }
}));

};

Answer 3

希望此解決方案有所幫助：

import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';

export default App = () => {
  
const [menu, setMenu] = React.useState({
    name: 'Pizza',
    toppings: {
      value: 2,
    },
  });

  React.useEffect(() => {
    console.log('menu', menu);
  }, [menu]);

  const handleIncrement = () => {
    setMenu(prev => ({
      ...prev,
      toppings: {...prev.toppings, value: prev.toppings.value + 1},
    }));
  };

  const handleDecrement = () => {
    setMenu(prev => ({
      ...prev,
      toppings: {...prev.toppings, value: prev.toppings.value - 1},
    }));
  };

  return (
    <View style={{flex: 1}}>
      <View
        style={{
          alignItems: 'center',
          flex: 1,
          flexDirection: 'row',
          justifyContent: 'space-evenly',
        }}>
        <TouchableOpacity onPress={handleDecrement}>
          <Text style={{fontSize: 44}}>-</Text>
        </TouchableOpacity>

        <Text>{menu.toppings.value}</Text>

        <TouchableOpacity onPress={handleIncrement}>
          <Text style={{fontSize: 44}}>+</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};