在同一组件中两次设置状态

Question

I am trying to setState to an event category for display inside of handleCategoryChange . The categories are rendered from the getCategories fetch point. I need to send a different value to the action fetch call in createEventHandler . The set state only happens once though and omits the second to send the first value of the state . Is there a work-around for this? or is this a limitation of react?

//... styles and imports

class NewEvent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      event: {
        category: ''
      }
    };
    this.createEventHandler = this.createEventHandler.bind(this);
    this.handleCategoryChange = this.handleCategoryChange.bind(this);
  }
  handleCategoryChange(evnt) {
    this.setState({
      event: {
        ...this.state.event,
        category: evnt.target.value
      }
    });
  }
  componentWillMount() {
    this.props.getCategories();
  }
  renderStepOne() {
    const { event } = this.state;
    const { categories } = this.props;
    return (
      <div style={styles.flexColumn}>
        <Typography variant="title">Event</Typography>
        <Select
          value={event.category}
          onChange={this.handleCategoryChange}
          error={categoryError.length > 0}
        >
          {categories.map(category => (
            <MenuItem key={category.id} value={category.name}>
              {category.name}
            </MenuItem>
          ))}
        </Select>
      </div>
    );
  }
  createEventHandler() {
    const { event } = this.state;

    if (!error) {
      let categoryId = this.props.categories.filter(e => {
        if (e.name === event.category) {
          return e;
        }
      });
      categoryId = categoryId[0].id;

      this.setState({
        event: {
          ...event,
          category: categoryId
        }
      });
      this.props.createEvent(event, this.props.history);
    }
  }
  render() {
    const { step } = this.state;
    const { isFetching, user, categories } = this.props;
    return (
      <ViewContainer title="New Event" isFetching={isFetching}>
        <Paper style={styles.paper}>
          <div style={styles.body}>{this.renderStepOne()}</div>
          <MobileStepper
            type="dots"
            steps={0}
            position="static"
            nextButton={
              <Button
                variant="raised"
                color="primary"
                onClick={this.createEventHandler}
                disabled={isFetching}
              >
                Submit
                <KeyboardArrowRight />
              </Button>
            }
          />
        </Paper>
      </ViewContainer>
    );
  }
}
const mapStateToProps = state => ({
  categories: state.events.categories
});
const mapDispatchToProps = dispatch => ({
  createEvent: (event, history) => dispatch(createEvent(event, history)),
  getCategories: () => dispatch(getCategories())
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withRouter(NewEvent));

Answer 1

You could try using functional setState like so:

this.setState(() => ({
  event: {
    ...this.state.event,
    category: evnt.target.value
  })
});

So that everything involving a setting of state happens together.