如何在 API 调用中将输入值作为参数传递？

Posted 2023-02-22

【中文标题】如何在 API 调用中将输入值作为参数传递？

【英文标题】：How to pass input value as paremeter in the API call?

【发布时间】：2020-06-06 05:39:30

【问题描述】：

如何在 API 调用中将输入值作为参数传递。我希望这个应用程序能够像您在输入字段中输入城市名称然后输入提交按钮以获取所有天气数据一样执行。 我检查了天气数据即将到来并保持状态。但我不知道如何获取输入城市名称并作为参数传递。如果您能帮助我，我将不胜感激。

//Action Creator ..

import weatherAPI from "../apis/weatherAPI";

export const fetchWeather = cityName => async dispatch => 
  const API_KEY = "240ef553958220e0d857212bc790cd14";

  const response = await weatherAPI.get(
    `/data/2.5/weather?q=$cityName&appid=$API_KEY`
  );
  dispatch(
    type: "FETCH_WEATHERLIST",
    payload: response.data
  );
;


//Reducer..
export default (state = [], action) => 
  if (action.type === "FETCH_WEATHERLIST") 
    return action.payload;
  
  return 
    ...state
  ;
;

//CombineRducer file..
import  combineReducers  from "redux";
import weatherListReducer from "./weatherListReducer";

export const rootReducer = combineReducers(
  weatherList: weatherListReducer
);
import React,  Component  from "react";
import  connect  from "react-redux";
import  fetchWeather  from "../actions";
class SearchBar extends Component 
  componentDidMount() 
    this.props.fetchWeather();
  

  onChangeHandler(e) 
  onSubmitHandler(e) 
    e.preventDefault();
  
  render() 
    console.log(this.props.list.main);

    return (
      <div className="row container">
        <h4 className="blue-text">Weather App</h4>
        <form className="col s12" onSubmit=this.onSubmitHandler>
          <div className="input-field">
            <input type="text" id="searchbar" />
            <label htmlFor="searchbar">Search City For Weather Forecast</label>
          </div>
          <div className="input-field ">
            <button className="btn " onChange=this.onChangeHandler>
              Search City
            </button>
          </div>
        </form>
      </div>
    );
  


const mapStateToProps = state => 
  return 
    list: state.weatherList
  ;
;

export default connect(mapStateToProps,  fetchWeather )(SearchBar);

【参考方案1】：

所以您需要访问输入值，以便将其传递给 API。 你有两种方法可以做到这一点

解决方案 1

在此解决方案中，您需要创建一个本地状态来保存输入值并在提交时从该状态访问该值。 所以你需要定义状态。 将 changeHandler 分配给输入而不是按钮。

注意：此解决方案会在每次更改时导致组件重新渲染，如果您需要避免这种情况，请参阅第二个解决方案。

class SearchBar extends Component 
  constructor()
     super();
     this.state =  value : "" ;
     this.onChangeHandler = this.onChangeHandler.bind(this);
     this.onSubmitHandler = this.onSubmitHandler.bind(this);
  

  componentDidMount() 
    this.props.fetchWeather();
  

  onChangeHandler(e)
    this.setState(
      value: e.target.value
    )
  

  onSubmitHandler(e)
    e.preventDefault();
    let cityName = this.state.value;
    this.props.fetchWeather(cityName);
  
  render() 
    // console.log(this.props.list.main);

    return (
      <div className="row container">
        <h4 className="blue-text">Weather App</h4>
        <form className="col s12" onSubmit=this.onSubmitHandler>
          <div className="input-field">
            <input type="text" id="searchbar" onChange=this.onChangeHandler value=this.state.value />
            <label htmlFor="searchbar">Search City For Weather Forecast</label>
          </div>
          <div className="input-field ">
            <button className="btn " type="submit">
              Search City
            </button>
          </div>
        </form>
      </div>
    );
  

解决方案 2：

你可以通过 React refs 访问输入值 为输入分配一个引用，您可以从提交处理程序访问它。

class SearchBars extends Component 

  componentDidMount() 
    // this.props.fetchWeather();
  

  onSubmitHandler = (e) => 
    e.preventDefault();
    let cityName = this.searchInput.value;        
    // this.props.fetchWeather(cityName);
  
  render() 
    // console.log(this.props.list.main);

    return (
      <div className="row container">
        <h4 className="blue-text">Weather App</h4>
        <form className="col s12" onSubmit=this.onSubmitHandler>
          <div className="input-field">
            <input type="text" id="searchbar" ref=(searchInput) =>  this.searchInput = searchInput  />
            <label htmlFor="searchbar">Search City For Weather Forecast</label>
          </div>
          <div className="input-field ">
            <button className="btn " type="submit">
              Search City
            </button>
          </div>
        </form>
      </div>
    );
  

【讨论】：

非常感谢您的帮助。它正在工作...... :):):)