我有一个表单,可以在其中输入数据并提交表单。然后我要显示数据。我使用道具调用该函数。但是由于某些原因,该功能不会在道具中更新。
操作:
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);