Axios 在 React 组件中无法正常工作

Question

我的 React 应用中有一个带有侧边栏组件的页面文件。

import React, { Component } from 'react';
import Navbar from './../components/layout/Navbar';
import { Table } from './../components/layout/Table';
import { Sidebar } from './../components/layout/Sidebar';

export class LandingPage extends Component {
    render() {
        return (
            <div>
                <Navbar />
                <h2 >Affiliation Information</h2>
                <div className="wrapper">
                    <Table />
                    <Sidebar />
                </div>
            </div>
        )
    }
}

export default LandingPage

这个侧边栏组件由一个输入文本框和一个提交按钮组成。这里的想法是用户在文本框中输入一些内容（例如：“La”），触发设置const interest 状态的事件处理程序，然后单击提交。然后submit 按钮将兴趣状态值插入到一个 url 字符串中，以便使用 Axios 调用我的 API，假设返回名称为“La”的任何项目的查询结果。 （例如：[{"contact_name": "John Latham"}]）。

import React, { useState, useEffect } from 'react';
import config from '../../config/config';
import axios from "axios";

export const Sidebar = () => {
    const [interest, setInterest] = useState(null);
    const [response, setResponse] = useState([]);
    const [loadingData, setLoadingData] = useState(true);
    console.log("At top: " + config.apiURL + `/affiliations/full?name=${interest}`);

    function HandleChange(event) {
        setInterest(event.target.value);
    };

    async function callYourAPI(interest) {
        await axios
            .get(config.apiURL + `/affiliations/full?name=${interest}`)
            .then((res) => {
                setResponse(res.data);
                setLoadingData(false);
            })
            .catch(function (error) {
                console.log(error);
            });
    };

    useEffect(() => {
        if (loadingData) {
            callYourAPI();
        } else {
            console.log(response);
        }
    }, [loadingData, response]); // Makes the useEffect dependent on response.

    return (
        <div className="sidebar" style={{
            borderLeft: "1px solid gray"
        }}>
            <h2 style={{ textAlign: "center" }}> Filter</h2>
            <form>
                <label style={{}}>Name</label> <br />
                <input
                    placeholder="Type name"
                    style={{ textAlign: "center", marginRight: "10px", height: "25px", width: "200px" }}
                    value={interest}
                    onChange={HandleChange}></input>
                <button className="btn btn-primary" onClick={() => callYourAPI(interest)}> Search</button>
            </form>
        </div >
    )
}

但是，发生的情况是，当我最初在输入框中输入一个值时，它会正确设置状态，但是当我单击按钮时，一切都变得混乱！ interest 变量变为未定义（该框被清除）并且该过程似乎在完成之前循环通过 Sidebar() 函数大约 3 次（以及同步 callYourAPI() 函数），但从未在我的 @ 中返回 console.log(response); 987654331@ 功能。在这一点上，我很困惑；我在这里做错了什么？！

更新：我已在我的表单onSubmit 中使用e.preventDefault() 进行了建议的更改。但是，这似乎是在加载时调用的，并且它陷入了对 API 的某种无限调用循环中。

export const Sidebar = () => {
    const [interest, setInterest] = useState("");
    const [response, setResponse] = useState([]);
    const [loadingData, setLoadingData] = useState(true);

    function HandleChange(event) {
        setInterest(event.target.value);
    };

    async function callYourAPI(interest) {
        await axios
            .get(config.apiURL + `/affiliations/full?name=${interest}`)
            .then((res) => {
                setResponse(res.data);
                setLoadingData(false);
            })
            .catch(function (error) {
                console.log(error);
            });

    };

    return (
        <div className="sidebar" style={{
            borderLeft: "1px solid gray"
        }}>
            <h2 style={{ textAlign: "center" }}> Filter</h2>
            <form onSubmit={(e) => { e.preventDefault(); callYourAPI(interest); }}>
                <label style={{}}>Name</label> <br />
                <input
                    placeholder="Type name"
                    style={{ textAlign: "center", marginRight: "10px", height: "25px", width: "200px" }}
                    value={interest}
                    onChange={HandleChange}></input>
                <button className="btn btn-primary"> Search</button>
            </form>
        </div >
    )
}

Answer 1

尝试像这样添加event.preventDefault()：

function HandleChange(event) {
        event.preventDefault()
        setInterest(event.target.value);
    };

提交表单时的默认行为是重新加载页面，从而重置状态。 event.preventDefault() 阻止页面的默认行为。