Javascript 遍历getter和setter react状态挂钩

在使用状态钩子公开多个状态属性的react组件中，是否有方法迭代所有状态属性并可能更改它们？问题是我有很多状态属性，所以我不想硬编码所有的getter和setter来迭代状态属性

在这个例子中，假设我的所有状态属性都默认为0，如果它们不同，我想做些什么。如何循环状态属性

const exampleComponent = () => {

  const [prop1, setProp1] = React.useState(0);
  const [prop2, setProp2] = React.useState(0);
  const [prop3, setProp3] = React.useState(0);
  //...etc., lots of properties

  // Loop over the properties. How should this loop be written?
  Object.keys(this.state).map(function (key) {
    // do something with each key-value pair here
  });

---

如果需要在属性上循环，我将使用数组作为状态：

const [numArr, setNumArr] = useState([0, 0, 0]);
// ...
numArr.forEach((num, i) => {
  // do something with each key-value pair here
});

---

如果您有许多状态彼此相关，那么您最好使用useReducer钩子，而不是将每个状态分开

编辑： 抱歉，我应该在前面提到，用useReducer钩子处理状态可能有点冗长，如果不熟悉的话可能会很复杂

这里是一个示例，其中不是有三个单独的状态，而是有一个具有三个属性的状态对象，当调度UPDATE_ACTION1时，属性和所有相关属性上的代码循环递增2

//define some actions 
const UPDATE_ACTION1 = "UPDATE_ACTION1";
const UPDATE_ACTION2 = "UPDATE_ACTION2";

//define a reducer function that will update the state
const objReducer = (state, action) => {
  switch (action.type) {
    case UPDATE_ACTION1:
      const keys = Object.keys(state);
      const newState = {};
      keys.forEach(key => {
        //perform any function on each property/key
        //here we just increment the value of each property by the given value
        if (key !== "isValid") {
          newState[key] = state[key] + action.value;
        }
      });
      return newState;

    case UPDATE_ACTION2:
      //do something else e.g. check validity and return updated state
      return { ...state, isValid: true };
    default:
      return state;
  }
};


//inside the component: call useReducer and pass it the reducer function and an initial state
//it will return the current state and a dispatch function
const [objState, dispatch] = useReducer(objReducer, {
   prop1: 0,
   prop2: 0,
   prop3: 0
});

//somewhere in your code, dispatch the action. it will update the state depending upon the action.  
const somethingHappens = () => {
   //some other operations are performed here
   dispatch({ type: UPDATE_ACTION1, value: 2 });
};

---

另一种方法是将想要的状态分配到数组中，然后将它们分解为命名常量（如果需要）并枚举

状态

数组。见下例：

const exampleComponent=（）=>{
常量状态=[React.useState（0），React.useState（0），React.useState（0）]；
常数[
[prop1，setProp1]，
[prop2，setProp2]，
[prop3，setProp3]，
]=国家；
//在属性上循环。
states.forEach（（[state，setState]）=>{
//在这里对每个键值对执行一些操作
});
}

听起来很有趣，你能举个例子吗？我无法让这些设置器在单个级别上工作，因为这是设置一个碰巧是数组的状态属性，而不是批量设置几个单独的状态属性。