Question

我正在使用自定义钩子useDropdown()生成两个下拉组件，一个用于动物，另一个用于品种。

我对如何随着动物的变化用新品种更新第二个下拉列表<BreedDropdown/>感到困惑。换句话说，谁负责再次调用自定义钩子，以便返回新的下拉菜单？

const [breeds, setBreeds] = useState([]);
const [animal, AnimalDropdown] = useDropdown("Animal", "dog", ANIMALS);
const [breed, BreedDropdown, setBreed] = useDropdown("Breed", "", breeds);

useEffect(() => {
  setBreeds([]);
  setBreed("");

  pet.breeds(animal).then(({ breeds }) => {
    const breedStrings = breeds.map(({ name }) => name);
    setBreeds(breedStrings);
  }, console.error);
}, [animal, setBreeds, setBreed]);
return (
  <div className="search-params">
    <h1>{animal}</h1>
    <form action="">
      <AnimalDropdown />
      <BreedDropdown />
      <button>Submit</button>
    </form>
  </div>
);

编辑：自定义钩子的实现。

import React, { useState } from "react";

const useDropdown = (label, defaultState, options) => {
  const [state, setState] = useState(defaultState);
  const id = `use-dropdown-${label.replace(" ", "").toLowerCase()}`;
  const Dropdown = () => (
    <label htmlFor={id}>
      {label}
      <select
        id={id}
        value={state}
        onChange={e => setState(e.target.value)}
        onBlur={e => setState(e.target.value)}
        disabled={options.length === 0}
      >
        <option>All</option>
        {options.map(item => (
          <option key={item} value={item}>
            {item}
          </option>
        ))}
      </select>
    </label>
  );
  return [state, Dropdown, setState];
};

export default useDropdown;

Answer 1

随着动物的变化，我对第二个下拉菜单如何用新品种进行更新感到困惑。

虽然我们不知道自定义钩子useDropdown是如何实现的，但从您的代码中由于useEffect钩子而发生的情况，您可以在{{1}的回调函数中调用setBreed }更改：

animal

谁负责再次调用自定义钩子，以便返回新的下拉菜单？

这取决于自定义钩子实现。

自定义挂钩如何更新？

1 个答案: