时间戳

首页 > 解决方案 > React - 如何使用动态属性更新状态而不先在状态中定义它？

reactjs - React - 如何使用动态属性更新状态而不先在状态中定义它？

问题描述

const [number, setNumber] = React.useState({})

我在下面做的方式不起作用：

   setNumber(prevNumber => ({
  ...prevNumber,
  [num]: (prevNumber[num] + 1) || 0,
}))

让它工作的唯一方法是当我定义如下属性时：

const [number, setNumber] = React.useState({
 1: 0,
 2: 0,
 3: 0,
 4: 0,
 5: 0,
})

我不知道我将拥有多少个属性（例如可能 1-5 或 1-10 个）并且不想预先定义所有属性。任何帮助都会很棒。谢谢你。

更新：“完整代码”：

// what i get is:{4: 4, 5: 1}
//what I wanted and get if i have initialState is:   {1: 0, 2: 0, 3: 0, 4: 4, 5: 1}
const reviews = [
  { title: "movie1", rating: 4 },
  { title: "movie2", rating: 5 },
  { title: "movie3", rating: 4 },
  { title: "movie4", rating: 4 },
  { title: "movie4", rating: 4 }
];
function App() {
  const [number, setNumber] = useState({ 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 });

  const func = (num) => {
    setNumber((prevNumber) => ({
      ...prevNumber,
      [num]: (prevNumber[num] || 0) + 1 || 0
    }));
  };
  const getNumbers = () => {
    return reviews.map((review) => {
      func(review.rating);
    });
  };

  console.log("number: ", number);
  return (
    <div>
      <button onClick={getNumbers}>helo</button>
    </div>
  );
}

标签： reactjs

解决方案

prevNumber[num] 可能是未定义的，所以你需要一个后备。

尝试这个： [num]: ((prevNumber[num] || 0) + 1) || 0,

在澄清你需要什么之后，这里是一个更新的fiddle。

由于您没有低于 4 的数字，因此它们永远不会被设置，因为例如 num 永远不会是 1。

所以你需要检查下面的数字是否已经存在，如果没有，用 0 填充。

const lowerNumbers = Array.from(Array(num)).reduce((aggregate,_,i) => {
    aggregate[i] = aggregate[i] || 0
    return aggregate
    }, {
      ...prevNumber,
      [num]: (prevNumber[num] || 0) + 1
    })
    return lowerNumbers
  });

这采用当前数字，将要增加的数字加一。它创建一个具有较小数字的数组，并检查它们是否已经存在，如果不存在，则用 0 填充它们。

{ "0": 0, "1": 0, "2": 0, "3": 0, "4": 4, "5": 1 }

推荐阅读