反应错误消息“地图不是函数”

Question

我在我的网站上创建了一个搜索引擎，以便可以通过用户的姓名搜索用户。用户名的建议应该根据输入的字母出现，但是一旦您单击任何字母，所有内容都会从屏幕上消失，并且控制台上会出现错误，其中显示：

地图不是函数

search.jsx组件代码：

import { useState } from "react";
// import axios from "axios";
import { Button } from "@chakra-ui/react";
import "./search.css";

const Search = () => {
    const [value, setValue] = useState('');
    const [data, setData] = useState([]);

    const onChange = async (e) => {
        setValue(e.target.value)
        const res = await fetch('http://localhost:5000/api/users')
        const data = await res.json()
        setData(data)
    };

  return (
    <div className="search">
        <div>
            <input
            type="text"
            value={value}
            className="search"
            placeholder="looking for someone?..."
            onChange={onChange}
            />
            <Button>Search</Button>
        </div>
        <div className="dropdown-content">
          {
            data.map((item) => {
            <div key={item.id}>
              {item.name}
            </div>})
          }
        </div>
    </div>
  )
}

export default Search

搜索前的页面

向搜索引擎输入任意字母后

Answer 1

您不能将 Map 函数用作 Void 类型，但它必须返回一个 ReactNode。请参考以下内容：

data.map((item => 
        <div key={item.id}>
          {item.name}
        </div>)