React redux 从输入中丢失一个字符答案

【问题标题】：React redux missing one character from inputReact redux 从输入中丢失一个字符
【发布时间】：2021-01-06 07:43:12
【问题描述】：

我对下面的代码有疑问：状态“searchQuery”设置为的 event.target.value 是可以的，但是当我将它传递给 redux 操作句柄更改（this.props.setSearchQuery）时，我总是少一个字符。比如我输入A，状态是A但是redux状态（showSearchQuery是''）如果我输入 AB 然后 showSearchQuery 变成 A，如果我输入ABC，它会变成AB。有任何想法吗？谢谢！

搜索框组件：

    import React from 'react';
    import './search-box.styles.css';
    import { connect } from 'react-redux';
    import { setShowSearchQuery } from '../../redux/actions/index';
    
    class SearchBox extends React.Component {
      constructor() {
        super();
    
        this.state = {
          searchQuery: '',
        };
      }
    
      handleChange = (event) => {
        // console.log('EVENT TARGET VAL', event.target.value);
        this.setState({ searchQuery: event.target.value });
        let query = this.state.searchQuery;
        this.props.setShowSearchQuery(query);
      };
    
      render() {
        return (
          <input
            type='search'
            placeholder={'Search by title'}
            onChange={this.handleChange}
          />
        );
      }
    }
    
    const mapStateToProps = (state) => {
      return {
        showSearchQuery: state.showSearchQuery,
        loading: state.loading,
      };
    };
    
    export default connect(mapStateToProps, { setShowSearchQuery })(SearchBox);

行动：

    export const setShowSearchQuery = (data) => {
      return {
        type: SET_SHOW_SEARCH_QUERY_SUCCESS,
        data,
      };
    };

减速器：

    import { setShowSearchQueryUtil } from './shows.utils';
    
    
     case SET_SHOW_SEARCH_QUERY_SUCCESS:
          return {
            ...state,
            showSearchQuery: setShowSearchQueryUtil(action.data),
            loading: false,
          };

utils函数：

    export const setShowSearchQueryUtil = (query) => {
      return query;
    };

另外，如果我有例如“ABC”，那么“showSearchQuery”就是 AB，但是如果我删除一个字符并且我只有 A 输入，那么它就变成了 ABC

【问题讨论】：

标签： reactjs redux jsx

【解决方案1】：

this.setState({ searchQuery: event.target.value });
let query = this.state.searchQuery;
this.props.setShowSearchQuery(query);

setState 是异步的，状态更新要到下一个tick才会生效。

当您收到let query = this.state.searchQuery 时，您认为 query 是状态更新后的值，其实不是。这是应用更新之前的状态。

这解释了为什么你的 reducer 状态总是落后于组件状态。

解决方案：

let query = event.target.value;
this.setState({ searchQuery: query});
this.props.setShowSearchQuery(query);

或者如果您必须从this.state 读取，请在this.setState 的回调函数中执行。回调仅在应用状态更新后调用。

this.setState({ searchQuery: event.target.value }, () => {
    let query = this.state.searchQuery;
    this.props.setShowSearchQuery(query);
});

【讨论】：

【解决方案2】：

把 this.props.setShowSearchQuery(query);

在componentDidUpdate()中

【讨论】：

【解决方案3】：

尝试onKeyUp，而不是快速修复更改

【讨论】：