Как передать входное значение в качестве параметра в вызове 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>
    );
  }
}