0

我有一个表格，我在其中输入数据并提交表格。然后我想显示数据。我使用道具调用该函数。但由于某种原因，该功能不会在道具中更新。

行动：

export function getTagFormSubmit(vin){
return (dispatch) =>{
        axios.get(`http://****/${vin}`)
    .then((response) =>{
        if (response.status !== 200){
            throw Error(response.statusText);
        }

        dispatch(taglocationsAreLoading(false));
        return response;
    })
    .then((response) => 
dispatch(taglocationsFetchDataSuccess(response.data)))
    .catch(() => dispatch(taglocationsHaveError("error", "Could not find 
taglocation(s).")));

};
}

export function taglocationsFetchDataSuccess(taglocations) {
console.log("response from action: ", taglocations);
return {
    type: 'TAGLOCATIONS_FETCH_DATA_SUCCESS',
    taglocations
};
}

减速器：

export function taglocationsFetchDataSuccess(state = [], action) {
console.log("taglocations from reducer", action.taglocations)
switch (action.type) {
    case 'TAGLOCATIONS_FETCH_DATA_SUCCESS':
        return action.taglocations;

    default:
        return state;
}
  }

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

    default:
        return state;
}
}

这是主要代码：

 constructor(props){
    super(props);

    this.state={
            searchvin: '',
            errors: []
    };

   this.handleFormSubmit=this.handleFormSubmit.bind(this);
  this.validateForm = this.validateForm.bind(this);
}



 validateForm(searchvin){
     const errors=[];
     if (searchvin==''){
         errors.push("Please enter last 8 of vehicle's VIN.");
     }else if(searchvin.length != 8 ){
             errors.push("Must be at 8 characters.");
     }
     return errors;
 }

    handleFormSubmit=(e)=>{
        e.preventDefault();

        const {searchvin}=this.state;
        let errors=this.validateForm(searchvin);
         if(errors.length>0){
             this.setState({errors: errors});
             console.log("error: ", errors);
             return;
         }else{
            this.setState({errors: []});
            this.props.getTagFormSubmit(searchvin);
            const taglocations=this.props;


         }





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

render(){
 const {errors} = this.state;

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>
<div><font color="red">{errors}</font></div>
</form><br/><br/>


</div>);} }

var setMargin = {
    padding: "0px 200px 20px 100px"
};

var setDistanceBetweenItems = {
    marginBottom: "5px"
};

 TaglocaByVin.propTypes = {
      getTagFormSubmit: PropTypes.func.isRequired, 
      taglocations: PropTypes.array,

    };

const mapStateToProps = state => ({

  taglocations: state.taglocations,
  message: state.message,
  error: state.error
});

const mapDispatchToProps = dispatch => ({

    getTagFormSubmit: searchvin => dispatch(getTagFormSubmit(searchvin))

             });

export default connect(mapStateToProps, mapDispatchToProps)(TaglocaByVin);
4

0 回答 0