Как использовать данные из формы, чтобы получить данные из API? - PullRequest
Новая
       6

Как использовать данные из формы, чтобы получить данные из API?

0 голосов
/ 11 декабря 2018

У меня есть форма для ответа, где я спрашиваю последние 8 из VIN автомобиля.Как только я получу эту информацию, я хочу использовать ее, чтобы узнать все местоположения машины.Как мне это сделать?Я хочу вызвать действие, а затем отобразить результаты.

Добавлен редуктор и действия ...

Вот что у меня есть ... 

class TaglocaByVIN extends Component {
constructor(props){
    super(props);
    this.state={
            searchvin: ''
    }
this.handleFormSubmit=this.handleFormSubmit.bind(this);
this.changeText=this.changeText.bind(this);

}
handleFormSubmit(e){
e.preventDefault();
let searchvin=this.state.searchvin;
//I want to maybe call the action and then display results
}

changeText(e){
this.setState({
    searchvin: e.target.value
})
}

render(){
return (
        <div>
    <form onSubmit={this.handleFormSubmit}>
    <label>Please provide the last 8 characters of VIN: </label>
    <input type="text" name="searchvin" value={this.state.searchvin} 
onChange={this.changeText}/>
    <button type="submit">Submit</button>

    </form>


        </div>
        );
}
  }
 export default TaglocaByVIN;

Вот мои действия: 

export function taglocationsHaveError(bool) {
return {
    type: 'TAGLOCATIONS_HAVE_ERROR',
    hasError: bool
};
 }

 export function taglocationsAreLoading(bool) {
  return {
    type: 'TAGLOCATIONS_ARE_LOADING',
    isLoading: bool
 };
 }

export function taglocationsFetchDataSuccess(items) {
return {
    type: 'TAGLOCATIONS_FETCH_DATA_SUCCESS',
    items
  };
}

export function tagformsubmit(data){
return(dispatch) =>{
    axios.get(`http://***`+data)
    .then((response) => {
        dispatch(taglocationsFetchDataSuccess);

    })
  };
}

Редуктор: 

export function tagformsubmit(state=[], action){
switch (action.type){
case 'GET_TAG_FORM_TYPE':
    return action.taglocations;

    default:
        return state;
}

}

1 Ответ

0 голосов
/ 11 декабря 2018

Это легко исправить, но потребуется несколько шагов:

  1. Настройка действия

  2. Настройте редуктор

  3. Извлечение и визуализация данных в компоненте

Создание действия

Прежде всего, вам нужно настроить действие для получения данных на основе VIN.Похоже, у вас это есть с вашей функцией tagformsubmit.Я бы сделал несколько корректировок здесь.

Вы должны включить улов, чтобы вы знали, что что-то пошло не так, измените вашу функцию param, чтобы включить диспетчеризацию, добавить тип и полезную нагрузку в вашу диспетчеризацию и исправить строковый литерал в вашем адресе API.Похоже, много, но это быстрое решение.

Обновите свой текущий код с этого: 

export function tagformsubmit(data){
return(dispatch) =>{
    axios.get(`http://***`+data)
    .then((response) => {
        dispatch(taglocationsFetchDataSuccess);

    })
  };
}

до этого здесь: 

//Get Tag Form Submit
export const getTagFormSubmit = vin => dispatch => {
  dispatch(loadingFunctionPossibly()); //optional
  axios
    .get(`/api/path/for/route/${vin}`) //notice the ${} here, that is how you use variable here
    .then(res =>
      dispatch({
        type: GET_TAG_FORM_TYPE,
        payload: res.data
      })
    )
    .catch(err =>
      dispatch({
        type: GET_TAG_FORM_TYPE,
        payload: null
      })
    );
};

Создание редуктора

Не уверен, что вы уже создали редуктор.Если у вас есть, вы можете игнорировать это.Создать свой редуктор тоже довольно просто.Сначала вы хотите определить исходное состояние, а затем экспортировать свою функцию.

Пример 

const initialState = {
  tags: [],
  tag: {},
  loading: false
};

export default (state=initialState, action) => {
    if(action.type === GET_TAG_FORM_TYPE){
        return {
          ...state, 
          tags: action.payload,
          loading: false //optional
        }
     }
     if(action.type === GET_TAG_TYPE){
        return {
          ...state, 
          tag: action.payload,
        }
     }
}

Теперь, когда у вас есть действия и редуктор , давайте настроим ваш компонент.

Компонент

Я предполагаю, что вы знаете весь необходимый импорт.В нижней части вашего компонента вы хотите определить свои типы.

TaglocaByVIN.propTypes = {
  getTagFormSubmit: PropTypes.func.isRequired,
  tag: PropTypes.object.isRequired
};

mapStateToProps: 

const mapStateToProps = state => ({
  tag: state.tag
});

connect для компонента: 

export default connect(mapStateToProps, { getTagFormSubmit })(TaglocaByVIN);

Обновите ваши данные для передачи и передачи в вашу функцию и получитеданные, которые возвращаются.

handleFormSubmit = (e) => {
e.preventDefault();
const { searchvin } = this.state;

this.props.getTagFormSubmit(searchvin); 

 const { tags } = this.props; 
 tags.map(tag => {
   //do something with that tag
}

Сложив все вместе, ваш компонент должен выглядеть следующим образом (не включая импорт): 

class TaglocaByVIN extends Component {
  state = {
    searchvin: ""
  };

  handleFormSubmit = e => {
    e.preventDefault();
    const { searchvin } = this.state;

    this.props.getTagFormSubmit(searchvin);

    const { tags } = this.props.tag;
    if(tags === null){ 
       //do nothing
    } else{
       tags.map(tag => {
      //do something with that tag
     });
  };
}
  changeText = e => {
    this.setState({
      searchvin: e.target.value
    });
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleFormSubmit}>
          <label>Please provide the last 8 characters of VIN: </label>
          <input
            type="text"
            name="searchvin"
            value={this.state.searchvin}
            onChange={this.changeText}
          />
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

TaglocaByVIN.propTypes = {
  getTagFormSubmit: PropTypes.func.isRequired,
  tag: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  tag: state.tag
});

export default connect(
  mapStateToProps,
  { getTagFormSubmit }
)(TaglocaByVIN);

Так и должно быть.Надеюсь это поможет.

...