Unable to display entries: TypeError: Cannot read properties of undefined (reading 'map') in reactjs

Question

我正在尝试从后端显示一些条目。如果我通过Postman传递数据，数据就完美传递到数据库了。但是，我无法在前端显示它们。这是我的代码

export default function EntriesDisplay() {

    const [entry,setEntry] = useState([]);
    const [update, setUpdate] = useState(false);

useEffect(function() {
        fetch("http://localhost:8000/api/entries")
        .then((res) => {
            console.log(res.data);
            setEntry(res.data)
        })
        .catch((err)=>{
            console.log(err);
        })
    }, [update])

return(
        <>
                <ul className="list-container">
                    {entry.map((data) => (
                        <EntriesCard
                            data={data}
                            handleEdit={handleEdit}
                            handleDelete={handleDelete}
                        />
                    ))}
                </ul>

这是组件 EntriesCard

function EntriesCard({data, handleEdit, handleDelete}) {
    const{_id, title, link, description} = data;

    return(
        <li key={_id}>
            <div className="title-description">
                <h3>{title}</h3>
                <h2>{link}</h2>
                <p>{description}</p>
            </div>
            <div className="button-container">
                <button className="button" name={_id} onClick={handleEdit}>
                    Edit
                </button>
                <button className="button" name={_id} onClick={handleDelete}>
                    Delete
                </button>
            </div>
        </li>
    )
}

这是代码的后端

app.get('/api/entries', asyncHandler(async (req, res) => {
    const entries = await Entry.find();
    res.json(entries);
})
)

Answer 1

您应该使用 res.json() 来解析返回的 json 数据。

useEffect(function() {
    fetch("http://localhost:8000/api/entries")
    .then(res => res.json())
    .then((data) => {
        console.log(data);
        setEntry(data)
    })
    .catch((err)=>{
        console.log(err);
    })
}, [update])

Answer 2

好的，感谢您确认回复内容。它是 JSON 所以你需要“解压”它。假设 JSON data 仍然是您需要存储在状态中的数组，检查 ok 响应和 return response.json() Promise 并继续链接。

useEffect(function() {
  fetch("http://localhost:8000/api/entries")
    .then(response => {
      if (!response.ok) throw new Error("response not ok");
      return response.json();
    })
    .then((data) => {
      console.log(data);
      setEntry(data);
    })
    .catch((err)=>{
      console.log(err);
    });
}, [update]);

Unable to display entries: TypeError: Cannot read properties of undefined (reading 'map') in reactjs

Unable to display entries: TypeError: Cannot read properties of undefined (reading 'map') in reactjs

reactjs

mern

react-hooks