如何在React中实现动态API调用 表单提交后传值到UserCard组件

你当前的问题核心有两个：

1. 状态未提升：请求返回的用户数据存在UserForm的局部状态中，无法传递给上层的App组件，而UserCard使用的数据来自App的状态，自然无法更新
2. 表单事件绑定存在逻辑错误，会导致重复提交、页面意外刷新等问题

修复步骤 #

1. 修改App组件，新增状态更新方法并向下传递 #

给App组件新增接收用户数据的方法，用来更新自身状态，再把方法通过props传给UserCard：

// App.jsx 完整修改后代码
import './App.css';
import React from "react";
import { BrowserRouter, Route } from 'react-router-dom';
import UserCard from "./components/Card";
import Followers from "./components/Followers";
import Repos from "./components/Repos";

class App extends React.Component {
  state = {
    user: '' ,
    location : '',
    bio: '',
    followers: [],
    repos: []
  }
  // 新增：接收UserForm返回的用户数据，更新状态
  updateUserState = (userData) => {
    this.setState({
      user: userData.login,
      location: userData.location,
      bio: userData.bio,
      // 后续可以在这里补充followers、repos的更新逻辑
    })
  }

  componentDidMount() {
    console.log("Component mounted");
  }

  render()
  {
  return (
    <BrowserRouter>
    <div className="App">
            <Route exact path = "/">
              {/* 把更新方法传给UserCard */}
              <UserCard  
                login = {this.state.user} 
                location = {this.state.location} 
                bio = {this.state.bio}
                updateUserState={this.updateUserState}
              />
        </Route>
        <Route path = "/followers">
          <Followers followers={this.state.followers}/>
        </Route>
        <Route path = "/repos">
          <Repos repos={this.state.repos}/>
        </Route>
    </div>
    </BrowserRouter>
  );
  }
}

export default App;

2. 修改UserCard组件，透传更新方法给内部的UserForm #

// Card.jsx 完整修改后代码
import React from "react"
import { NavLink } from "react-router-dom"
import UserForm from "./UserForm"

// 接收父组件传过来的updateUserState方法，透传给UserForm
const UserCard = (props) =>{
        return(
         <div className = "Card">
            <UserForm updateUserState={props.updateUserState} /> 
            <h1>Hello, {props.login}</h1>
            <h2>How is the weather in {props.location || 'your location'}?</h2>
            <h3>Here's a little about you </h3>
            <p>{props.bio || 'No bio provided'}</p>
            <nav>
            <ul className = "cardlist">
            <li><NavLink to = "/followers" style={{ textDecoration: 'none' }}>Go To Followers</NavLink></li>
            <li><NavLink to = "/repos" style={{ textDecoration: 'none' }}>Go To Repos</NavLink> </li>
            </ul>
            </nav>
            </div>
        )
    }

export default UserCard;

这里额外加了默认值，避免未请求时显示空内容的问题。

3. 修改UserForm组件，修复事件绑定和数据回传逻辑 #

删掉无用的局部状态，修复表单事件问题，请求成功后调用父组件传过来的方法回传数据：

// UserForm.jsx 完整修改后代码
import React,{useState} from "react";
import {Form, Button} from "react-bootstrap"
import axios from "axios";

const UserForm = (props) => {
    const[user, setUser] = useState("");
    const handleChange = (e) =>{
        setUser(e.target.value);
    }

    const handleSubmit = (e) =>{
        // 阻止表单默认提交刷新页面的行为
        e.preventDefault();
        console.log("Button was submitted",user);
        axios.get(`https://api.github.com/users/${user}`)
        .then((res => {
            // 请求成功后调用父组件传过来的更新方法，把数据回传给App
            props.updateUserState(res.data);
        }))
        .catch(err => console.log(err));
    }

    return (
        <div className = "Form">
        {/* 移除Form上的onChange绑定，避免不必要的触发 */}
        <Form onSubmit={handleSubmit} spellCheck="false" >
        <Form.Group controlId="formName">
            <Form.Label> Github Handle </Form.Label>
            {/* 把onChange绑定到输入框本身 */}
            <Form.Control 
                type="text" 
                placeholder="Enter Handle Here" 
                onChange={handleChange}
                value={user}
            />
        </Form.Group>
        {/* 移除Button上的onClick，避免重复触发提交事件 */}
        <Button type="submit">Submit</Button>
        </Form>
        </div>
    )
}

export default UserForm;

验证逻辑 #

修改完成后，输入Github用户名点击提交，只会触发一次API请求，数据会同步到App的状态中，自动传递给UserCard完成渲染。

内容的提问来源于stack exchange，提问作者anon