不能 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);
                    })