javascript - 替换一个对象内的钩子(Hook) useState

Question

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

嘿，任何人都知道如何以有效的方式替换这些钩子(Hook) 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