状态改变不会触发重新渲染

Question

我设置了一个 MUI 表，其最后一行包含一些文本字段（为了可读性而删除内容）：

[Generated rows...]
<TableRow>
  <TableCell component="th" scope="row">
    <TextField/>
  </TableCell> ...

  <TableCell>
    <Button variant="outlined" onClick={() => addFond()}>
        <Add />
    </Button>
  </TableCell>
</TableRow>

上面的行是从来自持久存储状态的数组生成的。 使用

addFond()

按钮和功能添加一行：

const addFond = () => {
  userDefaults.assuranceVie ??= {}
  userDefaults.assuranceVie.tableFondsVI ??= []
  userDefaults.assuranceVie.tableFondsVI.push({ ...formik.values, id: uuidv4() })
  setDefaults(userDefaults)
}

我正在为新行使用 Formik 表单，并且希望为最后一行上方的所有迭代行创建一个新的 formik 行。

当单击

addFond()

按钮时，我期望状态发生变化并重新渲染整个组件。 我有一个

console.log

在组件的顶层打印状态，但单击时不会打印任何内容。

请注意，此 Table 组件嵌入到更高阶的标签中。

Answer 1

状态改变不会触发重新渲染

实际上没有任何状态变化。不会触发重新渲染，因为状态的前一个值与新值完全相同，因为您正在改变它。

userDefaults.assuranceVie ??= {}

-> 状态突变。

您应该基于

setState

的回调函数来确保您引用的是当前状态，并且您应该返回一个新对象以避免突变。

const addFond = () => {
  setDefaults((prev) => ({
     ...prev,
     assuranceVie: {
        ...(prev.assuranceVie || {}), // in case if not exists
        tableFondsVI: [{ ...formikValues, id: uuidv4() }],
     }
  });
}