Question

无法显示条目：TypeError：无法读取 reactjs 中未定义的属性（读取‘map’）

2021-12-16

125

reactjs react-hooks mern

我试图从后端显示一些条目。如果我通过 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

好的，感谢您确认响应是什么。它是 JSON，因此您需要“解包”。假设 JSON data 仍然是您需要存储在状态中的数组，请检查响应是否为 ok 并返回 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]);

Answer 2

您应该使用 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])