React backpress 在屏幕上打印 axios 响应答案

【问题标题】：React backpress prints axios response on the screenReact backpress 在屏幕上打印 axios 响应
【发布时间】：2021-09-21 18:15:28
【问题描述】：

我创建了一个 React 应用程序，运行良好，但问题是，当我单击返回按钮时，屏幕变白并打印 axios get 或 post 请求的响应。

这是我的useEffect：

useEffect(() => {
        async function loadIBooks() {
            const response = await axios.get(
                `/Bookss?_type=${BooksType}&_page=${page}`
            );

            setBookss(response.data.data);

            if (response.data.data.length === 0) {
                setNoBookss(true);
            } else setNoBookss(false);
            setLoading(false);
        }
        loadBookss();
    }, [page, BooksType]);

这是我的路线数据：

router.get("/books", async (req, res) => {
    const allbooks = await bookSchema
        .find({
            status: "Published",
            bookType: req.query._type,
        })
        .sort({ _id: -1 });

    res.json({
        data: allbooks,
        status: res.status,
    });
});

它首先正确显示数据，但是当我转到下一页并返回时，它会打印 axios 响应。

【问题讨论】：

不确定这是否只是拼写错误，但您定义了函数loadIBooks，然后调用了一个名为loadBookss的函数...不同的拼写。另外，您的路线是/books，但在您的axios 电话中，您请求/bookss
嗨，是的，它是一种类型。起初它工作正常，但是当我单击返回按钮时，它会显示响应。

标签： node.js reactjs mongodb heroku axios

【解决方案1】：

我通过在 server.js 中添加静态部分来解决这个问题

if (process.env.NODE_ENV == "production") {
    app.use(express.static("./client/build"));
    const path = require("path");
    app.get("*", (req, res) => {
        res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
    });
}

【讨论】：