不能 map 獲取數據作為輸入字段自動完成

Question

我正在嘗試為我的輸入字段捕獲一些建議，我可以毫無問題地記錄它們，但我不能 map 它並在我的輸入類型字段上自動完成。 試圖了解我做錯了什么。

const Lista = () => {
  const [search, setSearch] = useState("");

  useEffect(() => {
    handleSearch();
  }, []);

  async function handleSearch() {
    const response = await fetch("/api/product");
    const search = await response.json();
    setSearch(search);
    console.log(search);
  }

  if (!search) return <p>Loading</p>;

  return (
    <>
      <section>
        <div className="listsContainer">
          <div className="cartContainer">
          <form className="formContainer" onSubmit={handleSubmit}>
            <div className="inputs">
              <div>
                <label>Product</label>
                <input
                  required
                  onChange={(e) => setSearch(e.target.value)}
                />
                <div>
                  {search
                    .filter((item) => {
                      return search.toLowerCase() === ""
                        ? null
                        : item.name.toLowerCase().includes(search);
                    })
                    .map((item) => (
                      <div key={item.id}>
                        <h1>{item.name}</h1>
                      </div>
                    ))}
                </div>

Answer 1

您正在將“搜索”映射為響應，同時它包含用戶輸入值。 您應該添加一個新的區域設置 state 來存儲響應，然后將其用於映射。 你應該注意到 filter 是一個數組方法，不會對 Json 起作用。你應該 filer Object.values(yourJson)。 請參閱下面的示例：

const Lista = () => {
  const [search, setSearch] = useState("");
  const [productResponse, setproductResponse] = useState({});

  useEffect(() => {
    handleSearch();
  }, []);

  async function handleSearch() {
    const response = await fetch("/api/product");
    const resToJson= await response.json();
    setproductResponse(resToJson);
    console.log(resToJson);
  }

  if (!productResponse) return <p>Loading</p>;

  return (
    <>
      <section>
        <div className="listsContainer">
          <div className="cartContainer">
          <form className="formContainer" onSubmit={handleSubmit}>
            <div className="inputs">
              <div>
                <label>Product</label>
                <input
                  required
                  onChange={(e) => setSearch(e.target.value)}
                />
                <div>
                  {Object.values(productResponse)?.
                    .filter((item) => {
                      return search.toLowerCase() === ""
                        ? null
                        : item.name.toLowerCase().includes(search);
                    })