在 React Hooks 中有设置状态的通用方法吗？如何管理多个状态？

Question

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

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

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

Answer 1

是的，使用钩子，您可以通过三种方式管理复杂状态（没有第 3 方库），其中主要的原因是管理 状态 ID 及其相应的元素。

管理具有多个状态的单个对象（注意数组是对象）。
如果 (1) 太复杂，请使用 useReducer。
对每个 key-value 对使用多个 useState（考虑它的可读性和维护性）。

看看这个：

// 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>
    </>
  );
}

备注

与 class 组件中的 setState 方法不同，useState 不会自动合并更新对象。您可以通过将函数更新程序形式与对象传播语法相结合来复制此行为：

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

参考React Docs.

Answer 2

我没有实际测试过，但应该可以。

有关详细信息，请参阅 https://reactjs.org/docs/hooks-reference.html#usestate。

import React, {useState} from 'react';

const MyComponent = () => {
    const [name, setName] = useState('Default value for name');
    return (<div><button onClick={()=>setName('John Doe')}}>Set Name</button></div>);
};
export default MyComponent;

Answer 3

做你想做的事情的正确方法是创建你自己的内部使用 useState 的钩子。

这是一个例子：

// This is your generic reusable hook.
const useHandleChange = (initial) => {
  const [value, setValue] = React.useState(initial);
  const handleChange = React.useCallback(
    (event) => setValue(event.target.value), // This is the meaty part.
    []
  );
  return [value, handleChange];
}

const App = () => {
  // Here we use the hook 3 times to show it's reusable.
  const [value1, handle1] = useHandleChange('one');
  const [value2, handle2] = useHandleChange('two');
  const [value3, handle3] = useHandleChange('three');
  return <div>
    <div>
      <input onChange={handle1} value={value1} />
      <input onChange={handle2} value={value2} />
      <input onChange={handle3} value={value3} />
    </div>
    <h2>States:</h2>
    <ul>
      <li>{value1}</li>
      <li>{value2}</li>
      <li>{value3}</li>
    </ul>
  </div>
}

ReactDOM.render(<App />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="app"></div>

请注意使用 React.useCallback 来阻止您的挂钩在每次渲染时返回新的处理函数。（我们不需要指定 setValue 作为依赖，因为 React 保证它永远不会改变）

在 React Hooks 中有设置状态的通用方法吗？如何管理多个状态？

Is there a generic way to set state in React Hooks? How to manage multiple states?

javascript

reactjs

react-hooks