React Native 无法显示更新的 setState 值

Question

下面是我的代码：

const ProductData = () => {
const [data, setData] = useState([])

const x = [{"product": {"product_description": "XYZ", "product_name": "Product1"}, "quantity": 1}]

setData(x);

function onChangeQuantity(i, type){
    let quant = data[i].quantity;
    if (type) {
      quant += 1;
      data[i].quantity = quant;
      setData(data);
      console.log(data);
    } else if (type === false && quant >= 2) {
      quant -= 1;
      data[i].quantity = quant;
      setData(data);
      console.log(data);
    } else if (type === false && quant === 1) {
      data.splice(i, 1);
      setData(data);
    }
}

return(
  <View>
    {data.map((item, index) => (
       <View key={index}>
         <Text>
            {item.product.product_name}
         </Text>
       </View>
       <View style={styles.container4}>
         <TouchableOpacity
            onPress={() => onChangeQuantity(index, false)}>
              <Text> Decrement Value </Text>
          </TouchableOpacity>
          <Text>{item.quantity}</Text>
          <TouchableOpacity
            onPress={() => onChangeQuantity(index, true)}>
              <Text> Increment Value </Text>
          </TouchableOpacity>
        </View>
      </View>      
))}
</View>
)
}

现在面临的问题是 - 每当我点击增量值/减量值时，数量就会更新，但更新后的值不会显示在 return 语句中。按下增量值按钮后的示例控制台日志如下：

[{"product": {"product_description": "Product2", "product_name": "Product2"}, "quantity": 2}]

但是更改没有反映在视图中。单击按钮后如何立即显示更新的数量。请让我知道我哪里出错了。非常感谢。

Answer 1

不要在 React 中改变状态 - 它会导致重新渲染问题。将您的函数更新为不可变版本。

function onChangeQuantity(i, add) {
    if (add) {
        setData(
            data.map((item, j) => i === j ? ({ ...item, quantity: item.quantity + 1 }) : item)
        );
        return;
    }
    const curr = data[i];
    if (curr.quantity === 0) {
        setData(
            data.filter((_, j) => i !== j)
        );
    } else {
        setData(
            data.map((item, j) => i === j ? ({ ...item, quantity: item.quantity - 1 }) : item)
        );
    }
}

另一种方法：

function onChangeQuantity(i, add) {
    const newObj = { ...data[i], quantity: data[i].quantity + (add ? 1 : -1) };
    setData(
        data
            .map((item, j) => i === j ? newObj : item)
            .filter(item => item.quantity)
    );
}

Answer 2

问题

您正在改变状态对象。

let quant = data[i].quantity; // <-- reference to state object
if (type) {
  quant += 1;
  data[i].quantity = quant; // <-- mutation!!
  setData(data); // <-- saved same array back to state
  console.log(data);
} else if (type === false && quant >= 2) {
  quant -= 1;
  data[i].quantity = quant; // <-- mutation!!
  setData(data); // <-- saved same array back to state
  console.log(data);
} else if (type === false && quant === 1) {
  data.splice(i, 1); // <-- mutation!!
  setData(data);
}

解决方案

你需要浅拷贝状态。将 data 数组 复制到 一个新的数组引用中，然后浅复制您要更新数量的元素。

function onChangeQuantity(i, type){
  if (type) {
    setData(data => data.map((el, index) => index === i ? {
      ...el,
      quantity: el.quantity + 1,
    } : el));
  } else if (!type && data[i] >= 2) {
    setData(data => data.map((el, index) => index === i ? {
      ...el,
      quantity: el.quantity - 1,
    } : el));
  } else if (!type && quant === 1) {
    setData(data => data.filter((el, index) => index !== i));
  }
}

React Native 无法显示更新的 setState 值

React Native unable to display updated setState value

reactjs

react-native

react-hooks

use-effect

use-state

问题

解决方案