Why state changes only on second click?

Question

The problem is that the state filterArray changes from null only on second click on button "Обучить". Why?

I really need it to work from the first click. Problem is not in dialog that i call. The function parse input is parsing input to catch words with * at the end.

Dialog is called from the first click, but the state is changing only from second.

class Content extends React.Component {
    constructor(props) {
        super(props);
    // initial state
    this.state = {
        textInput: "",
        filterArray: [],
        projectID: "",
        entity: "",
        synonyms: ""
    };
    this.dialog = React.createRef()
}

clear = () => {
    // return the state to initial
    this.setState({
        textInput: "",
        filterArray: []
    });
};

updateIdandEntity = (value1, value2) => {
    this.setState({ projectID: value1, entity: value2 })
}

parseInput = () => {
    let tempArray = this.state.textInput.split(" "); // `convert string into array`
    let newArray = tempArray.filter(word => word.endsWith("*"));
    let filterArray  = newArray.map(word => word.replace('*', ''));
    this.setState({filterArray});
    this.dialog.current.handleClickOpen()
};

render() {
    return (
        <Paper style={{maxWidth: 936, marginLeft: "250px", overflow: "hidden"}}>
            <AppBar position="static" color="default" elevation={0}>
                <Toolbar>
                    <Grid container spacing={16} alignItems="center">
                        <Grid item xs>
                            <TextField
                                fullWidth
                                placeholder="Введите фразу которую нужно обучить"
                                id="textInput"
                                InputProps={{
                                    disableUnderline: true
                                }}
                                value={this.state.textInput}
                                onChange={e => {
                                    this.setState({textInput: e.target.value});
                                }}
                            />
                        </Grid>
                        <Grid item>
                            <DialogProject ref={this.dialog} data={this.state.filterArray} updateIdandEntity={this.updateIdandEntity}/>
                            <Button
                                variant="contained"
                                color="primary"
                                style={{
                                    background:
                                        "linear-gradient(45deg, #00ACD3 30%, #00BE68 90%)"
                                }}
                                onClick = {this.parseInput}
                            >
                                Обучить
                            </Button>

can you share a running example?

Sagiv b.g
– Sagiv b.g

2019-05-06 13:57:16 +00:00
Commented May 6, 2019 at 13:57 — Sagiv b.g
– Sagiv b.g, Commented May 6, 2019 at 13:57

DDD · Accepted Answer · 2019-05-08 13:30:14Z

2

Seems like you have a problem with the asynchronicity of setState(). setState has a second optional parameter, which is a callback function. Just add your dialog into the callback function of setState().

this.setState({filterArray}, () => {this.dialog.current.handleClickOpen()})

UPDATE

parseInput = async () => {
  console.log(this.state.textInput)
  let tempArray = this.state.textInput.split(" "); // `convert string into array`
  let newArray = tempArray.filter(word => word.endsWith("a"));
  let filterArray  = newArray.map(word => word.replace('a', 'b'));
  await this.setState({filteArray: filterArray})
  this.dialog.current.handleClickOpen()
};

Ok, you need to add async and await here. THat should do it.

edited May 8, 2019 at 13:30

answered May 6, 2019 at 14:20

DDD

4891 gold badge5 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sasha Sedova Over a year ago

I have tried your version and after testing it happened that: 1click: dialog called, state have not changed. 2click: dialog called and state is changed.

Sasha Sedova Over a year ago

do you have any idea why that would happen?

Collectives™ on Stack Overflow

Why state changes only on second click?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related