替换一个对象内的钩子 useState

Question

  const [country, setCountry] = useState("");
  const [city, setCity] = useState("");
  const [population, setPopulation] = useState("");
  const [location, setLocation] = useState("");
  const [temp_min, setTmep_min] = useState("");

嘿，任何人都知道如何以有效的方式替换这些钩子 useState 并清理它的代码，比如将它们全部放在一个对象中而不是用新的 useState 初始化它。

Answer 1

您可以改用useReducer。这将允许您使用对象初始化状态。此外，您现在可以使用 dispatch 进行所有更新，尽管您需要向它传递一个包含您希望更新的属性的对象。

const reducer = (state, update) => ({
  ...state,
  ...update,
});

const [state, dispatch] = useReducer({
  country: '',
  city: '',
  population: '',
  location: '',
  temp_min: ''
});

示例：

dispatch({ country: 'Spain' }); // setting a country
dispatch({ city: 'Madrid' }); // setting a city

Answer 2

你可以像这样useState

const [obj, setObj] = useState({
  country: "",
  City: "",
  Population: "",
  Location: "",
  temp_min: ""
})

Answer 3

您可以创建对象：

const [data, setData] = useState({
  country: '',
  city: '', 
  population: 0, // some number here
  location: '', 
  temp_min: 0, // some number here
});

然后你可以像这样得到每个值：

console.log(data.country)
console.log(data.city)
// and so on..

Answer 4

我实现了 useReducer 挂钩，以便将所有这些属性放在一个简单的对象中（这对于具有复杂状态的组件更好）并且还使用了一些验证以防止在卸载组件时错误更新状态，例如：

const App: React.FC = () => {

  const initialState = {
    name: '',
    password: ''
  };
  const {
    state,
    onUpdateValue, // Update a value from the dictionary
    onClearValue   // Remove a value from the dictionary
    onClear        // Remove all values from the dictionary
  } = useDictionary(initialState);

  const onSubmit = useCallback((event: React.FormEvent) => {
    event.preventDefault();
    console.log('Create User!', state);
    onClear();
  }, [state]);
  
  return (
    <form onSubmit={onSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={state.name}
          onChange={(e) => onUpdateValue('name', e.target?.value)}
        />
      </label>
      <label>
        Password:
        <input
          type="password"
          value={state.password}
          onChange={(e) => onUpdateValue('password', e.target?.value)}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

回购的

Link：https://github.com/proyecto26/use-dictionary

编码愉快！ <3

替换一个对象内的钩子 useState

Replace hooks useState inside one object

javascript

jsx

reactjs