【问题标题】：React Native unable to display updated setState valueReact Native 无法显示更新的 setState 值
【发布时间】：2021-09-01 21:53:17
【问题描述】：

下面是我的代码：

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}]

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

【问题讨论】：

标签： reactjs react-native react-hooks use-effect use-state

【解决方案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)
    );
}

【讨论】：

非常感谢 :) 这有效。还了解了如何与国家打交道。

【解决方案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));
  }
}

【讨论】：