React.js：如何在 Select 選項中設置默認值？

Question

我正在嘗試使用custom hooks在 React 中實現select-option ，並在嘗試在select option中設置默認值時遇到問題。
從UI中獲取的數據中，來自 web API，我能夠顯示基於類別的selected data （在我的例子中是美食）。 但是當我 select 默認值顯示All數據時，state 不會更新。
另一個問題是關於select option中的duplicated values 。 我需要具有唯一值作為option values 。 我正在考慮以這種方式獲得獨特的價值

 <option key={restaurant.id}>{[...new Set(restaurant.cuisine)]}</option>

但這會刪除重復的字符，但不會duplicated values 。

代碼如下。
Hooks/useRestaurants 組件

import React, { useState, useEffect } from "react";

const useRestaurants = (cuisine) => {
  const [allRestaurants, setAllRestaurants] = useState([]);

  useEffect(() => {
    fetch("https://redi-final-restaurants.herokuapp.com/restaurants")
      .then((res) => res.json())
      .then((result) => setAllRestaurants(result.results))
      .catch((e) => console.log("error"));
  }, []);

  useEffect(() => {
    if (cuisine === "All") {
      const filterRestaurants = [...allRestaurants].filter((restaurant) => // here is my try
       restaurant.cuisine.toLowerCase().includes(cuisine.toLowerCase())//code here doesn't work
      );
      setAllRestaurants(filterRestaurants);
    } else {
      const filterRestaurants = [...allRestaurants].filter((restaurant) =>
        restaurant.cuisine.toLowerCase().includes(cuisine.toLowerCase())
      );
      setAllRestaurants(filterRestaurants);
    }
  }, [cuisine]);

  return [allRestaurants];
};

export default useRestaurants;

App.js 組件

import React, { useState } from "react";

import useRestaurants from "./useRestaurants";
import Form from "./Form";
import Restaurant from "./Restaurant";
import "./styles.css";

export default function App() {
  const [cuisine, setCuisine] = useState("All");
  const [allRestaurants] = useRestaurants(cuisine);

  const onChangeHandler = (e) => {
    setCuisine(e.target.value);
  };

  return (
    <div className="App">
      <Form
        onChangeHandler={onChangeHandler}
        allRestaurants={allRestaurants}
        cuisine={cuisine}
        setCuisine={setCuisine}
      />
      {allRestaurants &&
        allRestaurants.map((restaurant) => (
          <Restaurant restaurant={restaurant} key={restaurant.id} />
        ))}
    </div>
  );
}

和 Form.js 組件

import React from "react";

const Form = ({ allRestaurants, cuisine, onChangeHandler }) => {
  return (
    <select onChange={onChangeHandler} value={cuisine}>
      <option value={cuisine}>All</option>
      {allRestaurants.map((restaurant) => (
        <option key={restaurant.id}>{restaurant.cuisine}</option>
      ))}
    </select>
  );
};

export default Form;

任何幫助將不勝感激。

Answer 1

執行過濾的 useRestaurants 中的useRestaurants缺少依賴數組中的allRestaurants 。 這意味着初始值（一個空數組）將始終在該 useEffect 中使用。 因此，更改菜式會將allRestaurants設置為空數組。 但是，您不能將allRestaurants添加到依賴項數組並在效果內進行設置。 這將導致它無限循環。 解決方案是不使用效果 - 只需創建過濾結果並將其作為單獨的值或代替allRestaurants

// useRestaurants.js
import { useState, useMemo, useEffect } from "react";

const useRestaurants = (cuisine) => {
  const [allRestaurants, setAllRestaurants] = useState([]);

  useEffect(() => {
    fetch("https://redi-final-restaurants.herokuapp.com/restaurants")
      .then((res) => res.json())
      .then((result) => setAllRestaurants(result.results))
      .catch((e) => console.log("error"));
  }, []);

  const filteredRestaurants = useMemo(() => {
    return cuisine === "All"
      ? allRestaurants
      : allRestaurants.filter((restaurant) =>
          restaurant.cuisine.toLowerCase().includes(cuisine.toLowerCase())
        );
  }, [cuisine, allRestaurants]);

  return [allRestaurants, filteredRestaurants];
};

export default useRestaurants;

要修復重復的美食值，您需要創建 Set 然后過濾該結果。 您的表單仍在過濾所有allRestaurants並且{[...new Set(restaurant.cuisine)]}只是創建一個具有單個值的數組。

// Form.js
import React from "react";

const Form = ({ allRestaurants, cuisine, onChangeHandler }) => {
  const cuisines = Array.from(new Set(allRestaurants.map((r) => r.cuisine)));

  return (
    <select onChange={onChangeHandler} value={cuisine}>
      <option value='All'}>All</option>
      {cuisines.map((cuisine) => (
        <option id={cuisine}>{cuisine}</option>
      ))}
    </select>
  );
};

export default Form;

記得在 App.js 中遍歷過濾后的餐廳

...
const [allRestaurants, filteredRestaurants] = useRestaurants(cuisine);

...
return (
  ...
  {filteredRestaurants &&
    filteredRestaurants.map((restaurant) => (
      <Restaurant restaurant={restaurant} key={restaurant.id} />
  ))}
)