React中按钮能否同时触发dispatch与父组件的clearInputs方法？

你的需求完全可行，不过代码里存在一个小错误需要修正，以下是具体说明和修正方案：

1. 子组件参数的错误修正 #

React组件仅接收一个props对象作为参数，你当前写的export function Exchanger(props, clearInputs)是错误的——clearInputs并不是独立参数，而是props中的属性。你需要通过props.clearInputs调用该方法，或者用解构赋值简化代码。

2. 先dispatch再清空的逻辑可行性 #

你想要的先分发Redux Action，再调用父组件清空函数的逻辑完全成立：

• 普通Redux dispatch是同步执行的，会立即更新store状态，之后再执行clearInputs()清空父组件输入状态，顺序完全符合预期。
• 如果changeCurrency是异步Action（比如用了Redux Thunk），dispatch会返回Promise，若需等待异步操作完成后再清空输入框，可改用async/await语法。

修正后的子组件代码 #

方案一：直接使用props对象 #

export function Exchanger(props) {
    const result = useSelector(state => state.counter.value)
    const dispatch = useDispatch()

    return(
        <div>
            <div>
                <button 
                    type="submit" 
                    disabled={props.disableData} 
                    aria-label="Exchange currency" 
                    onClick={() => {
                        // 先分发Redux Action
                        dispatch(changeCurrency({
                            data_1: props.data_1,
                            data_2: props.data_2,
                            data_3: props.data_3
                        }));
                        // 再调用父组件的清空方法
                        props.clearInputs()
                    }}
                >
                    Exchange currency
                </button>
                &nbsp;
                <span>{ result }</span>
            </div>
        </div>
    )
}

方案二：解构props（更简洁） #

export function Exchanger({ clearInputs, data_1, data_2, data_3, disableData }) {
    const result = useSelector(state => state.counter.value)
    const dispatch = useDispatch()

    return(
        <div>
            <div>
                <button 
                    type="submit" 
                    disabled={disableData} 
                    aria-label="Exchange currency" 
                    onClick={() => {
                        dispatch(changeCurrency({ data_1, data_2, data_3 }));
                        clearInputs()
                    }}
                >
                    Exchange currency
                </button>
                &nbsp;
                <span>{ result }</span>
            </div>
        </div>
    )
}

异步Action场景的补充处理 #

如果changeCurrency是异步Action（比如请求后端接口获取汇率），需要等待异步操作完成后再清空输入框，可修改onClick逻辑为：

onClick={async () => {
    // 等待异步Action执行完成
    await dispatch(changeCurrency({ data_1, data_2, data_3 }));
    // 再清空输入框
    clearInputs()
}}

注意：这种写法要求你的异步Action必须返回Promise。

父组件代码说明 #

你父组件中定义的clearInputs方法和传递给子组件的写法完全正确，子组件调用该方法时会触发父组件状态更新，从而清空输入框和选择器内容。

内容的提问来源于stack exchange，提问作者Floooorson