React Redux:状态总是落后一个输入

Question

我创建了一个基于类的组件，用于呈现输入字段。我需要全局状态来更新，同时用户在输入中键入。问题是全局状态总是比输入字段中的实际状态落后一步(呈现？(。例如，当我在输入中写"winners"时，状态是"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使用以前的状态，更改为当前值。

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

请注意，您已经有了一个与setState的浅合并，因此不需要破坏this.state。

Answer 2

state落后了一步，因为您应该将prop函数作为setState回调调用，通过这种方式，prop函数将在状态集之后立即调用。

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