使用 Redux 反应 - 意外调用回调函数

Question

我还不是 React 大师，因此我的问题。如果在子组件中我在输入字段中编写新字符，为什么仍然调用父函数？我只想在单击子组件中的"搜索"按钮时调用父方法。

父组件：

class MainPage extends Component {
render() {
let searchOffersBar = (
<MuiThemeProvider>
<SearchOffer
offersFound={this.props.onOffersFound}
/>
</MuiThemeProvider>
);
let searchResults = (
<SearchResults
offers={this.props.offers}
/>
);
return (
<Aux>
<div className={classes.container}>
<Intro/>
<div className={classes.contentSection}>
{searchOffersBar}
{searchResults}
</div>
</div>
</Aux>
)
}
}
const mapStateToProps = state => {
return {
offers: state.offers.offers
}
}
const mapDispatchToProps = dispatch => {
return {
onOffersFound: (searchParams) => dispatch(actions.fetchOffersByCriteria(searchParams))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(MainPage);

<SearchOffer>是带有搜索部分(输入字段和"搜索报价"按钮(的子组件。我想在我的输入中填写一些数据，然后单击按钮。我虽然单击按钮会在子组件中调用一个方法：onOffersFound：

const searchOffer = props => {
let currentDate = new Date();
const [searchCriteria, setSearchCriteria] = useState({
brand: 'xxx',
capacity: 100
})
const [drawerIsOpen, setDrawerIsOpen] = useState(false);
const handleToggle = () => setDrawerIsOpen(!drawerIsOpen);
const handleBrand = (event) => {
let mergedState = updateObject(searchCriteria, {brand: event.target.value})
setSearchCriteria(mergedState);
}
const handleCapacity = (event) => {
let mergedState = updateObject(searchCriteria, {capacity: event.target.value});
setSearchCriteria(mergedState);
}
const handleBookingFrom = (bookingFromValue) => {
let mergedState = updateObject(searchCriteria, {bookingFrom: bookingFromValue});
setSearchCriteria(mergedState);
}
const handleBookingTo = (bookingToValue) => {
let mergedState = updateObject(searchCriteria, {bookingTo: bookingToValue});
setSearchCriteria(mergedState);
}
return (
<div className={classes.sideNav}>
<Button variant={"outlined"} onClick={handleToggle} className={classes.sideNavBtn}>Search</Button>
<Drawer
className={classes.drawer}
containerStyle={{top: 55}}
docked={false}
width={200}
open={drawerIsOpen}
onRequestChange={handleToggle}
>
<AppBar title="Search"/>
<form noValidate autoComplete="off" onSubmit={props.offersFound(searchCriteria)}>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Grid container justify="space-around">
<TextField
id="brand"
label="Brand"
margin="normal"
onChange={handleBrand}
/>
<TextField
id="capacity"
label="Capacity"
margin="normal"
onChange={handleCapacity}
/>
<Button variant="contained" color="primary">
Search
</Button>
</Grid>
</MuiPickersUtilsProvider>
</form>
</Drawer>
</div>
);
}
export default searchOffer;

onOffersFound在我的操作创建器中如下所示：

export const fetchOffersByCriteria = (searchParams) => {
return dispatch => {
let queryParams = '?brand='+searchParams.brand + '&capacity='+searchParams.capacity;
axios.get('/getFilteredOffers' + queryParams)
.then(response => {
dispatch(saveFoundOffers(response.data)); --> saves the state
})
.catch(error => {
console.log(error);
})
}
}

我的问题是为什么每次在子组件中输入新字符时都会调用上述方法fetchOffersByCriteria？我只想在单击子组件中的"搜索"按钮时调用此方法。也许我的方法不好？

感谢您的所有提示！

Answer 1

问题是props.offersFound(searchCriteria)每render都会被调用。onSubmitprop 应该是提交时要调用的函数。目前，它正在立即调用。

这一行：

onSubmit={props.offersFound(searchCriteria)}

应该是(或类似的东西(：

onSubmit={() => props.offersFound(searchCriteria)}

目前，在brand(或capacity(字段中键入时，将调用handleBrand更改回调。这将调用setSearchCriteria(状态更新(，从而触发组件的重新渲染。当此组件重新渲染时，它会立即调用props.offersFound(searchCriteria)并将返回值传递给onSubmitprop。您可能希望onSubmitprop 是提交时要调用的函数。

有关更多 de3tail，请参阅受控组件的文档。

Answer 2

<form 
noValidate 
autoComplete="off" 
onSubmit={props.offersFound(searchCriteria)}>

您立即调用 prop 并尝试使用返回的结果作为事件侦听器。它应该是

<form 
noValidate 
autoComplete="off" 
onSubmit={() => props.offersFound(searchCriteria)}>

相反