Question

我最终想要创建状态的副本，对其进行相应更新而无需重新呈现，然后setState（myCopy）触发View更新。这个问题可以通过代码更好地解释：

export default function App() {
   // Table Data
  const [tableState, setTableState] = useState({
    tableHead: ['Currency', 'Sell', 'Buy'],
    tableData: [
      ['USD', '1', '1'],
      ['EUR', '2', '2'],
      ['JPY', '3', '3'],
    ],
  });
  var newTableState = tableState;

  useState(() => {
    let rate1 = 15;
    let rate2 = 8;

    // * These 2 lines:
    newTableState.tableData[0][1] = rate1;
    newTableState.tableData[0][2] = rate2;
  },[])

  return(
   <View>
    <Text>{tableState.tableData[0][1]}</Text>
    <Text>{tableState.tableData[0][2]}</Text>
   </View>
  )
}

这两行仅应更新newTableState。但是，tableState也正在更新，从而更新了View。这是预期的行为吗？

我记得读过一篇文章，我认为在不使用setState的情况下直接更新状态是一种不好的做法。

这里是demonstrating snack。

Answer 1

之所以发生这种情况，是因为您没有分配tableState本身，而是分配了对其的引用。因此更新newTableState意味着您正在改变状态。

有两种方法可以执行此操作，或者使用lodash的{{1}}

cloneDeep

或通过使用const newTableState = cloneDeep(tableState);像这样：

JSON

将变量设置为等于状态会在变量更改时更新状态

1 个答案: