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

Question

如何在 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);

Answer 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>
    );
  }
}