Question

我有一个要求我输入汽车VIN的最后8位的表格。收到该信息后，我想使用它来获取汽车的所有位置。我该怎么做呢？我想调用该操作，然后显示结果。

添加了减速器和动作...

这是我到目前为止所拥有的...

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

}

Answer 1

这是一个简单的解决方法，但是将需要一些步骤：

设置操作
设置您的减速器
获取并渲染组件中的数据

创建动作

首先，您需要设置一个操作以基于VIN获取数据。看起来您的tagformsubmit函数具有该功能。我会在这里进行一些调整。

您应该包括一个catch，以便知道是否出了点问题，更改函数param以包括dispatch，为您的dispatch添加类型和有效载荷，并在您的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);

应该的。希望这可以帮助。

如何使用表格中的数据从api中获取数据？

1 个答案: