ReactJS 自定義 Hook 未呈現預期的 output

Question

我正在試驗 ReactJS 自定義 Hooks，但我不明白下面的示例中發生了什么！

我希望在屏幕上看到：'標簽：<后跟所選選項之一（“香蕉”或“蘋果”或“橙子”）>'，但它是'標簽：'所以選項未定義！

有人可以解釋一下幕后發生了什么，為什么我看不到該選項的預期 output 嗎？

const useFruit = () => {
  const [option, setOption] = useState<string>();
  const [options] = useState(["Bananas", "Apples", "Oranges"]);

  return {
    option,
    setOption,
    options,
  };
};

const FruitDropdown = () => {
  const { options, setOption } = useFruit();

  return (
    <select
      placeholder="Select option"
      onChange={(e) => {
        setOption(e.target.value);
      }}
    >
      {options.map((option) => (
        <option value={option}>{option}</option>
      ))}
    </select>
  );
};

const FruitLabel = () => {
  const { option } = useFruit();
  return (
    <label>Label: {option}</label>
  );
};

export default function play() {
  return (
    <>
      <FruitDropdown />
      <FruitLabel />
    </>
  );
}

Answer 1

僅僅因為它們使用相同的自定義鈎子，它們不會自動共享 state。 每次運行 useFruits 時，您將創建一個新的隔離 state ，它只能在該實例中如何訪問。 並且每當創建 state 時，它默認為未定義。

為了解決您的問題，您需要將組件包裝在上下文中並將 state 放置在上下文中。 像這樣的東西：

const FruitContext = createContext()

const FruitProvider = ({ children }) => {
    const [option, setOption] = useState<string>();
  const [options] = useState(["Bananas", "Apples", "Oranges"]);

   return (
       <FruitContext.Provider value={{ option, setOption, options }}>{children}</FruitContext.Provider>
   )
}

export const useFruits = () => useContext(FruitContext)

不要忘記包裝你的組件：

<FruitProvider>
      <FruitDropdown />
      <FruitLabel />
</FruitProvider>