如何在 redux-state-change 上触发 react-component-reload？

Question

场景：自动完成

1. HTML input-element 的值被转移到 redux-state。
2. 这个 redux-state 定义了一个使用 tracker 注入的查询（如下图所示）。
3. 查询结果显示为自动完成选项。

问题：input-value 更改时组件未重新加载

当input-值发生变化时，如何重新加载组件？

代码片段

const AutoComplete = (props) => {
    let handleChange = (event) => {
        props.setSearchQuery(event.target.value);
    };

    return (
        <div>
            <input
                type="text"
                onChange={(event) => handleChange(event)}
            />
        </div>
    );
};

export default connect(
    (state) => ({
        searchQuery: selectors.getSearchQuery(state)
    }),
    (dispatch) => ({
        setSearchQuery: (queryString) => dispatch(actions.setSearchQuery(queryString))
    })
)(
    composeWithTracker(
        (props, onDate) => {
            const searchResults = props.searchFunction(props.searchQuery);
            onDate(null, {searchResults});
        }
    )(AutoComplete)
);

Answer 1

我认为这是因为您发送了一个动作。但是 AutoComplete 的 props 没有改变，所以组件不会渲染。

const AutoComplete = (props) => {
    let handleChange = (event) => {
        props.setSearchQuery(event.target.value);
    };

    return (
        <div>
            <input
                type="text"
                onChange={(event) => handleChange(event)}
            />
            <span>{this.props.searchQuery}</span>
        </div>
    );
};

只需确保在您的组件中使用 searchQuery 道具