React-Redux: State 总是后面一个输入

Question

我创建了一个基于 class 的组件来呈现输入字段。 我需要在用户输入输入时更新全局 state。 问题是全局 state 总是比输入字段中的实际内容落后一步（渲染？）。 例如，当我在输入中写“winners”时，state 是“winner”。 我怎样才能解决这个问题？

零件

class TeamCardT1 extends Component {
    constructor(props) {
        super(props);

        // local state
        this.state = {
            team_one_name: "Team One",
        };

        // bind events
        this.handleName = this.handleName.bind(this);
    };

    handleName = e => {
        this.setState({
            ...this.state,
            team_one_name: e.target.value
        });
        this.props.handleSubmit(this.state);
    };


    render() {
        const { team_one_name } = this.state;

        return (
            <>
            <div className="teamCard_container">
                <input
                type="text"
                id="team_one_name"
                name="team_one_name"
                value={team_one_name}
                onChange={this.handleName}
                maxLength="35"
                minLength="2"
                className="teamCard_teamName" />
        
                <PlayersCardT1 />
                <ScoreCard />
            </div>
        </>
        )
    };
}

组件的 index.js

const mapStateToProps = ({ team_one_name }) => {
    return {
        team_one_name,
    };
};

// Dispatch 
const mapDispatchToProps = dispatch => {
    return {
        handleSubmit: (data) => { dispatch(updateTeamOneName(data)) }
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(TeamCardT1);

Answer 1

你handleSubmit用之前的state，改成当前值。

handleName = e => {
        this.setState({ team_one_name: e.target.value });
        this.props.handleSubmit(e.target.value);
    };

请注意，您已经与setState进行了浅合并，因此您无需破坏this.state 。

Answer 2

state is one step behind because you should call the prop function as a setState callback by this way the prop function will call just after the state set.

handleName = e => { 
    this.setState({ 
        ...this.state,
        team_one_name: e.target.value
        }, () => {
        this.props.handleSubmit({value: e.target.value});
    }); 
};