时间戳

首页 > 解决方案 > React redux 从输入中丢失一个字符

reactjs - React redux 从输入中丢失一个字符

问题描述

我对下面的代码有一个问题：状态“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,
          };

实用程序功能：

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

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

标签： reactjsreduxjsx

解决方案

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

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

当你得到let query = this.state.searchQuery你认为查询是状态更新后的值时，它不是。这是应用更新之前的状态。

这就解释了为什么你的 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);
});

推荐阅读