如何通过反应使 api 调用动态化？

Question

如何使用输入表单中的值并仅在提交按钮时进行 api 调用？ 现在，当我按下提交时，我收到了我期望并希望收到的用户名，但它似乎没有将信息发送回 userCard。我现在意识到我没有在表格中调用它，但我有点不确定如何处理这个。

import React,{useEffect, useState} from "react";
import {Form, Button} from "react-bootstrap"
import axios from "axios";
import UserCard from "./Card";



const UserForm = () => {

    const[user, setUser] = useState("");
    const[login, setLogin] =  useState("");
  const handleChange = (e) =>{
        //console.log(e.target.value)
        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 => 
            {setLogin(res.data);
         
            })
        )
          .catch(err => console.log(err));
    }

    return (
        
        <div className = "Form">
        <Form  onSubmit={handleSubmit} onChange = {handleChange} spellcheck="false" >
       <Form.Group controlId="formName">
            <Form.Label> Github Handle </Form.Label>
            <Form.Control type="text" placeholder="Enter Handle Here" />
        </Form.Group>
        <Button onClick = {handleSubmit}>Submit</Button>
        
        </Form>

        </div>
    )
}

export default UserForm;

import React from "react"
import { NavLink } from "react-router-dom"
import UserForm from "./UserForm"

const UserCard = (props) =>{
        return(
         <div className = "Card">
            <UserForm /> 
            <h1>Hello, {props.login}</h1>
            <h2>How is the weather in {props.location}?</h2>
            <h3>Here's a little about you </h3>
            <p>{props.bio}</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;

import './App.css';
import React from "react";
import axios from "axios";
import { BrowserRouter, Link, Route } from 'react-router-dom';
import UserCard from "./components/Card";
import Followers from "./components/Followers";
import Repos from "./components/Repos";
import UserForm from "./components/UserForm"

let followerArray = [];

class App extends React.Component {

  state = {
    user: '' ,
    location : '',
    bio: '',
    followers: [],
    repos: []

  }
   
  //make api calls after the component mounts --> equivalent to useEffect()
  //componentDidUpdate is equivalent to useEffect(,[])
  componentDidMount() {
    console.log("Component mounted");
    //get user data
   
        console.log("finished")

        //get repos
       
  }

  render()
  {
  return (
    <BrowserRouter>
    <div className="App">
            <Route exact path = "/">
          <UserCard  name = {this.state.name} 
          login = {this.state.user} 
          location = {this.state.location} 
          bio = {this.state.bio}
          />
    </Route>
    <Route path = "/followers"  followers ={this.state.followers}>
    <Followers />
    </Route>
    <Route path = "/repos">
    <Repos repos={this.state.repos}/>
    </Route>
    </div>
    
    </BrowserRouter>
    

  );
  }
}

export default App;

Answer 1

当你想从子组件中取回一些值时，你可以将一个函数传递给子组件。在你的情况下：

1. 在UserCard组件中定义一个回调function，并使用卡片中的回调函数数据：

import React from "react"
import { NavLink } from "react-router-dom"
import UserForm from "./UserForm"

const UserCard = (props) =>{
    const[user, setUser] = useState("");
    const[login, setLogin] =  useState("");
    const giveBackDataToCard = (login , user) => {
       setLogin(login);
       setUser(user);
    }

        return(
         <div className = "Card">
            <UserForm /> 
            <h1>Hello, {login}</h1>
            <h2>How is the weather in {user.location}?</h2>
            <h3>Here's a little about you </h3>
            <p>{user.bio}</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;

1. 在需要的地方调用 props 函数：

import React,{useEffect, useState} from "react";
import {Form, Button} from "react-bootstrap"
import axios from "axios";
import UserCard from "./Card";

const UserForm = () => {

    
    const handleChange = (e) =>{
        setUser(e.target.value);
    }

    const handleSubmit = (e) =>{
        e.preventDefault();
        axios.get(`https://api.github.com/users/${user}`)
        .then((res => 
            {
                setLogin(res.data);
//------------> For example here
                props.giveBackDataToCard(res.data,e.target.value);

            })
        )
          .catch(err => console.log(err));
    }

    return (
        
        <div className = "Form">
        <Form  onSubmit={handleSubmit} onChange={handleChange} spellcheck="false" >
       <Form.Group controlId="formName">
            <Form.Label> Github Handle </Form.Label>
            <Form.Control type="text" placeholder="Enter Handle Here" />
        </Form.Group>
        <Button onClick = {handleSubmit}>Submit</Button>
        
        </Form>

        </div>
    )
}

export default UserForm;

Answer 2

好吧，如果您的问题是如果您想将数据从 userForm 发送回 userCard，您应该遵循这些方法。 第一种方法是，你应该先学习一个在 docs https://reactjs.org/docs/context.html 中已经提到的 react 上下文 API，用它在屏幕之间传递数据。 第二种方法是，总是在父级组件调用API，我认为这是一种更好更简单的方法。通过从父级组件调用 API，您必须根据您所需的 useForm 传递一些道具。 第三种方法是，最好的方法是使用一些状态管理存储，如Mobx、Redux 等...这是最好的方法。然后，您实际上可以将您的状态动态地传递给您的 useCard 组件。

如果答案与您的问题相匹配，那就太好了，如果不告诉我将删除以寻求社区帮助。