反应表单未从 Express 服务器获取

Question

我有一个快速后端，当从 React 表单发出 POST 请求时，它会向 OpenWeather API 发出 GET 请求。目前，问题在于后端 POST 路由我认为没有正确调用并且无法存储搜索词。在调试时，我从前端发出了一个获取请求，该请求有效，并且我还使用相同的路径放入了一个存储在 express 中的虚拟数组，该路径不起作用并且可以从前端和后端获取。

网络选项卡中没有显示 POST 请求，只有响应为 304 的 GET 请求，但在控制台中我收到“cod：”400”，消息：“错误查询”，我假设这是来自的错误消息OpenWeather API

反应代码

const WeatherContainer = () => {
    let [searchTerm, setsearchTerm] = useState('')
    let [currentWeather, setCurrentWeather] = useState({});
    let [forecastedWeather, setForecastedWeather] = useState({});
    let [loading, setLoading] = useState(false); 
    
    const handleInput = (e) => {
        setsearchTerm(e.target.value);
    }

    const handleSearch = () => {
        fetch('/search-weather')
            .then(res => res.json())
            .then(data => {
                    setCurrentWeather({data})
                    console.log(data)
               })
    };
    

    return (
        <>
            <div className='search-bar'>
                <form method="POST" action='/search-term'>
                    <input className='text_input' type='text' name='searchTerm' onChange={handleInput} placeholder='Enter city' />
                    <button className='search-button' onClick={handleSearch} type='submit' value='submit' name='button'>
                        <Icon icon={searchIcon} flip="horizontal" />
                    </button>
                </form>
            </div>
            {}
            <div className='weather_container'>
                <CurrentWeatherComponent />
                <ForecastContainer />
            </div>
        </>
    )

};

快递代码

const express = require('express');
const PORT = 5000;
const fetch = require('node-fetch')
const app = express();
//const server = require('http').createServer(app);
const weatherApiKey = '****HIDDEN****';
const cors = require('cors');

app.use(express.static("client"));
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

let searchTerm;

// Post From Input, Route uses 'searchTerm' name attribute in input
app.post('/search-term', (req, res) => {
    searchTerm = req.body.searchTerm;
    
});

// GET Current & Forecast Weather By Search Term
app.get('/search-weather', (req, res) => {

    const currentUrl = `http://api.openweathermap.org/data/2.5/weather?q=${searchTerm}&units=imperial&appid=${weatherApiKey}`;

    fetch(currentUrl)
        .then(response => response.json())
        .then(currentData => {
            return res.json({currentData})
        })
        .catch(err => { 
            res.redirect('/error')
    });  
}); 


app.listen(PORT); 
console.log(`Server is listening on ${PORT}`);

Answer 1

可能在您的搜索天气回调的主体中，“${searchTerm}”未定义。所以你将“q”参数设置为“未定义”，这就是你得到错误查询的原因。

我已经用测试令牌为我检查了它并且也得到了它（对于空术语）。 这里是Working & Bad query

Answer 2

我发现了问题，我的 POST 出于某种原因无法正常工作，因此我将输入字段中的搜索词参数组合到 GET 请求中，现在我的 Express 代理服务器正确地与 OpenWeatherAPI 通信，检索结果，然后发送将结果返回给客户端。我使用了路由参数，你可以阅读更多关于here的信息。

重新格式化的反应代码

const WeatherContainer = () => {
    let [searchTerm, setsearchTerm] = useState('')
    let [currentWeather, setCurrentWeather] = useState({});
    let [forecastedWeather, setForecastedWeather] = useState({});
    let [loading, setLoading] = useState(false); 
    
    const handleInput = (e) => {
        setsearchTerm(e.target.value);
    }

    const handleSearch = () => {
        fetch(`/weather/${searchTerm}`)
            .then(res => res.json())
            .then(data => {
                    console.log(data)
               })
    };
    

    return (
        <>
            <div className='search-bar'>
                    <input className='text_input' type='text' name='searchTerm' onChange={handleInput} placeholder='Enter city' />
                    <button className='search-button' onClick={handleSearch} type='submit' value='submit' name='button'>
                        <Icon icon={searchIcon} flip="horizontal" />
                    </button>
            </div>
            
            <div className='weather_container'>
                <CurrentWeatherComponent />
                <ForecastContainer />
            </div>
        </>
    )

};

重新格式化的快递代码

const express = require('express');
const PORT = 5000;
const fetch = require('node-fetch')
const app = express();
const weatherApiKey = '***HIDDEN***';
const cors = require('cors');

app.use(express.static("client"));
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// GET Current & Forecast Weather By Search Term
app.get('/weather/:searchTerm', (req, res) => {
    console.log(req.params)
    const searchTerm = req.params.searchTerm;
    console.log(searchTerm)
    
    let currentUrl = `http://api.openweathermap.org/data/2.5/weather?q=${searchTerm}&units=imperial&appid=${weatherApiKey}`;
  
    fetch(currentUrl)
        .then(res => res.json())
        .then(data => {
            res.send(data)
        })
        .catch(err => { 
            res.redirect('/error')
    });  
}); 


app.listen(PORT); 
console.log(`Server is listening on ${PORT}`);