Question

如标题所说，如何仅更改我想要的对象的状态，而不更改两者的状态？

  const [state, setState] = useState([
    { foo1: null, foo2: "" },
  ]);

  function setfoo1(e) {
    e.preventDefault();
    // How do i set foo1: "Hello World"
  }

Answer 1

您可以使用扩展运算符复制所有您想保持不变的字段值，如下所示：

> str(ycd)
spec_tbl_df [7,808 x 13] (S3: spec_tbl_df/tbl_df/tbl/data.frame)
 $ Date : chr [1:7808] "1/2/1990" "1/3/1990" "1/4/1990" "1/5/1990" ...
 $ 1 Mo : chr [1:7808] "N/A" "N/A" "N/A" "N/A" ...
 $ 2 Mo : chr [1:7808] "N/A" "N/A" "N/A" "N/A" ...
 $ 3 Mo : num [1:7808] 7.83 7.89 7.84 7.79 7.79 7.8 7.75 7.8 7.74 7.89 ...
 $ 6 Mo : num [1:7808] 7.89 7.94 7.9 7.85 7.88 7.82 7.78 7.8 7.81 7.99 ...
 $ 1 Yr : num [1:7808] 7.81 7.85 7.82 7.79 7.81 7.78 7.77 7.77 7.76 7.92 ...
 $ 2 Yr : num [1:7808] 7.87 7.94 7.92 7.9 7.9 7.91 7.91 7.91 7.93 8.1 ...
 $ 3 Yr : num [1:7808] 7.9 7.96 7.93 7.94 7.95 7.94 7.95 7.95 7.98 8.13 ...
 $ 5 Yr : num [1:7808] 7.87 7.92 7.91 7.92 7.92 7.92 7.92 7.94 7.99 8.11 ...
 $ 7 Yr : num [1:7808] 7.98 8.04 8.02 8.03 8.05 8.05 8 8.01 8.07 8.18 ...
 $ 10 Yr: num [1:7808] 7.94 7.99 7.98 7.99 8.02 8.02 8.03 8.04 8.1 8.2 ...
 $ 20 Yr: chr [1:7808] "N/A" "N/A" "N/A" "N/A" ...
 $ 30 Yr: num [1:7808] 8 8.04 8.04 8.06 8.09 8.1 8.11 8.11 8.17 8.25 ...
 - attr(*, "problems")= tibble [1,006 x 5] (S3: tbl_df/tbl/data.frame)
  ..$ row     : int [1:1006] 3035 3036 3037 3038 3039 3040 3041 3042 3043 3044 ...
  ..$ col     : chr [1:1006] "30 Yr" "30 Yr" "30 Yr" "30 Yr" ...
  ..$ expected: chr [1:1006] "a double" "a double" "a double" "a double" ...
  ..$ actual  : chr [1:1006] "N/A" "N/A" "N/A" "N/A" ...
  ..$ file    : chr [1:1006] "'YeildCurve.csv'" "'YeildCurve.csv'" "'YeildCurve.csv'" "'YeildCurve.csv'" ...
 - attr(*, "spec")=
  .. cols(
  ..   Date = col_character(),
  ..   `1 Mo` = col_character(),
  ..   `2 Mo` = col_character(),
  ..   `3 Mo` = col_double(),
  ..   `6 Mo` = col_double(),
  ..   `1 Yr` = col_double(),
  ..   `2 Yr` = col_double(),
  ..   `3 Yr` = col_double(),
  ..   `5 Yr` = col_double(),
  ..   `7 Yr` = col_double(),
  ..   `10 Yr` = col_double(),
  ..   `20 Yr` = col_character(),
  ..   `30 Yr` = col_double()
  .. )

Answer 2

传播前一个状态，最后分配foo1。例如

setState({
  ...state,
  foo1: "Hello World"
})

Answer 3

虽然其他答案是有效的方法并且可以解决问题，但它们让我想知道一些事情。为什么要使用一个具有许多属性的状态对象？ useState 将与几个一起工作。组件的变量 foo1 和 foo2 是该组件的状态。为什么要拖出更改此状态的代码？另外，为什么不让 React 为您管理您的状态对象？

const [foo1, setFoo1] = useState(null);
const [foo2, setFoo2] = useState("");

// .. later foo1 changes
setFoo1("Hello world");

如何在反应钩子中为对象设置属性？

3 个答案: