Reactjs React with Redux-意外调用回调函数

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

父组件：

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

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

我的问题是，为什么每次我在子组件中输入新字符时都会调用上述方法

FetchOfferByCriteria

？我只想在单击子组件中的搜索按钮时调用此方法。也许我的方法不好

---

谢谢你的提示

问题是，

props.offersFound（searchCriteria）

会在每个

render

调用。提交时，

onSubmit

prop应该是要调用的函数。目前，它正在被立即调用

这一行：

onSubmit={props.offersFound(searchCriteria)}

应该是（或类似的）：

当前，在

品牌

（或

容量

）字段中键入时，将调用

把手

更改回调。这将调用

setSearchCriteria

（状态更新），触发组件的重新呈现。当此组件重新呈现时，它会立即调用

props.offersFound（searchCriteria）

，并将返回值传递给

onSubmit

prop。您可能希望

onSubmit

prop是在提交时调用的函数

---

有关更多的de3tails，请参阅。

问题是，

props.offersFound（searchCriteria）

在每次

渲染时都会被调用。提交时，
onSubmit
prop应该是要调用的函数。目前，它正在被立即调用

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

这一行：

onSubmit={props.offersFound(searchCriteria)}

应该是（或类似的）：

当前，在
品牌
（或
容量
）字段中键入时，将调用
把手
更改回调。这将调用
setSearchCriteria
（状态更新），触发组件的重新呈现。当此组件重新呈现时，它会立即调用
props.offersFound（searchCriteria）
，并将返回值传递给
onSubmit
prop。您可能希望
onSubmit
prop是在提交时调用的函数

有关更多De3Tail，请参阅。

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


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

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

props.offersFound（searchCriteria）}>

相反


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

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

props.offersFound（searchCriteria）}>

相反
天哪！你说得对！但有趣的是，onSubmit不起作用——点击搜索按钮后什么也没发生。仅当我将调用我的方法直接添加到搜索按钮时，它才起作用，如下所示：props.offersFound（searchCriteria）}>搜索是
按钮
使用
type=“submit”
呈现
按钮
？（不是，
type=“button”
）天哪！你说得对！但有趣的是，onSubmit不起作用——点击搜索按钮后什么也没发生。仅当我将调用我的方法直接添加到搜索按钮时，它才起作用，如下所示：props.offersFound（searchCriteria）}>搜索是
按钮
使用
type=“submit”
呈现
按钮
？（不是，
type=“button”
）