如何通过redux-state-change来触发react-component-reload？

Question

如何通过redux-state-change来触发react-component-reload？

场景：自动完成

HTML input - 元素的值以redux-state转换。此redux-state定义了一个使用跟踪器注入的查询（如下所示）。查询结果显示为auto-complete-options。

问题：input上的组件重新加载 - 值更改

当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的道具不会改变，因此组件不会渲染。

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道具