在 React Hooks 中是否有设置状态的通用方法?如何管理多个状态? [英] Is there a generic way to set state in React Hooks? How to manage multiple states?

问题描述

我有一个问题，我是否可以在 React Hooks 中使用 useState 泛型，就像我可以在 React 组件中同时管理多个状态一样?

state = {输入1:"，输入2:"，输入3:"//.. 更多状态};handleChange = (事件) =>{const { name, value } = event.target;this.setState({[名称]:值，});};

解决方案

是的，使用 hooks，您可以通过三种方式管理复杂的状态(无需 3rd 方库)，其中主要的原因是管理 状态 id 及其对应的元素.

1. 管理具有多个状态的单个对象(请注意，数组是一个对象).
2. 如果 (1) 太复杂，请使用 useReducer.
3. 对每个键值对使用多个 useState(考虑它的可读性和维护性).

看看这个:

//Ids-values 对.const complexStateInitial = {输入1:"，输入2:"，输入3:"//.. 更多状态};功能减速器(状态，动作){return { ...state, [action.type]: action.value };}导出默认函数 App() {const [fromUseState, setState] = useState(complexStateInitial);//处理来自 useState 的通用状态const onChangeUseState = (e) =>{const { name, value } = e.target;setState((prevState) => ({ ...prevState, [name]: value }));};const [fromReducer, dispatch] = useReducer(reducer, complexStateInitial);//处理来自 useReducer 的通用状态const onChangeUseReducer = (e) =>{const { name, value } = e.target;dispatch({ type: name, value });};返回 (<><h3>useState</h3><div>{Object.entries(fromUseState).map(([key, value]) => (<输入键={键}名称={key}价值={价值}onChange={onChangeUseState}/>))}<pre>{JSON.stringify(fromUseState, null, 2)}</pre>

<h3>useReducer</h3><div>{Object.entries(fromReducer).map(([key, value]) => (<输入名称={key}键={键}价值={价值}onChange={onChangeUseReducer}/>))}<pre>{JSON.stringify(fromReducer, null, 2)}</pre>

</>);}

注意事项

• 与类组件中的 setState 方法不同，useState 不会自动合并更新对象.您可以通过将函数更新程序形式与对象扩展语法相结合来复制此行为:

setState(prevState => {//Object.assign 也可以返回 {...prevState, ...updatedValues};});

请参阅 React 文档.

I have a question, if I can use useState generic in React Hooks, just like I can do this in React Components while managing multiple states?

state = {
  input1: "",
  input2: "",
  input3: ""
  // .. more states
};

handleChange = (event) => {
  const { name, value } = event.target;
  this.setState({
    [name]: value,
  });
};

解决方案

Yes, with hooks you can manage complex state (without 3rd party library) in three ways, where the main reasoning is managing state ids and their corresponding elements.

1. Manage a single object with multiple states (notice that an array is an object).
2. Use useReducer if (1) is too complex.
3. Use multiple useState for every key-value pair (consider the readability and maintenance of it).

Check out this:

// Ids-values pairs.
const complexStateInitial = {
  input1: "",
  input2: "",
  input3: ""
  // .. more states
};

function reducer(state, action) {
  return { ...state, [action.type]: action.value };
}

export default function App() {
  const [fromUseState, setState] = useState(complexStateInitial);

  // handle generic state from useState
  const onChangeUseState = (e) => {
    const { name, value } = e.target;
    setState((prevState) => ({ ...prevState, [name]: value }));
  };

  const [fromReducer, dispatch] = useReducer(reducer, complexStateInitial);

  // handle generic state from useReducer
  const onChangeUseReducer = (e) => {
    const { name, value } = e.target;
    dispatch({ type: name, value });
  };
 
  return (
    <>
      <h3>useState</h3>
      <div>
        {Object.entries(fromUseState).map(([key, value]) => (
          <input
            key={key}
            name={key}
            value={value}
            onChange={onChangeUseState}
          />
        ))}
        <pre>{JSON.stringify(fromUseState, null, 2)}</pre>
      </div>

      <h3>useReducer</h3>
      <div>
        {Object.entries(fromReducer).map(([key, value]) => (
          <input
            name={key}
            key={key}
            value={value}
            onChange={onChangeUseReducer}
          />
        ))}
        <pre>{JSON.stringify(fromReducer, null, 2)}</pre>
      </div>
    </>
  );
}

Notes

• Unlike the setState method found in class components, useState does not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax:

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

Refer to React Docs.

这篇关于在 React Hooks 中是否有设置状态的通用方法?如何管理多个状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！