Question

我正在使用像这样的动态键对setState使用react钩子。最终输出应仅包含唯一键（没有重复键）

我的代码：

const [sub, setSub] = React.useState();

setValue({
      [name]: { ...value, [key]: event.target.value }
});

输出为：

{
  "0":"P","1":"r","2":"o","3":"d","4":"u","5":"c","6":"t","7":" ","8":"T","9":"y","10":"p","11":"e",
  "Assignee":"Mike","Product Type":"Product 2"
}

预期输出：

{
  "Assignee":"Mike",
  "Product Type":"Product 2"
}

Answer 1

如本例所示。


import React from "react";
import "./styles.css";

export default function App() {
const [sub, setSub] = React.useState({
  this: 0,
  is: 0,
  the: 0,
  default: 0,
  state: 0
});
const handleOnClick = ({ target: { value = "this" } }) => {
  setSub((oldState) => ({
    ...oldState,
    [value]: oldState[value] + 1
  }));
};
return (
  <div className="App">
    <h1>Hello R</h1>
    <h2>Start editing to see some magic happen!</h2>
    {
      Object.keys(sub).map((k, i)=>
        <div key={`${sub}_${i}`}>{sub[k]}</div>)
    }
    {Object.keys(sub).map((k, i) => (
      <button onClick={handleOnClick} key={i} value={k}>
        {k}
      </button>
    ))}
  </div>
);
}

您可以使用动态键在react中实现动态更改状态。虽然我会使用另一种方法。将每个值分隔在其独立的getter和setter中。这样，当您更新值时，其他值保持不变。这样，您可以获得更好的性能。当然，这并非总是可能的。看着你的物体，也许第一个例子就是路要走。

反应setState动态数组

1 个答案: