trying to NOT get response one change late - reactjs

Question

So I have an input :
onChange this input's value get's updated and stored in props for persistance but that's unrelated to the issue.
I'm going to add a checkmark next to the field if the entered value is found in the database.
I already have the call to API and answer set up (my redux reducer) :
import EventTypes from '../EventTypes';
const initialState = {
response: {},
};
export default (state = initialState, action) => {
switch (action.type) {
case EventTypes.EXISTS_FULFILLED.type:
console.log(action.payload.body().data());
return { ...state, response: action.payload.body().data() };
default:
return state;
}
};
Note that the above console log correctly prints the true/false value (+ sent value. I get the two back from the server).
but in the component that calls this :
const defaultProps = {
onChange: () => {
},
value: { type: '' },
provider: { type: '' },
};
class InputsComponent extends Component {
onChange = () => {
this.props.onChange(this.props.id);
};
updateFirstInput(event) {
const { onChange, exists, response } = this.props;
const payload = {
objectType: this.props.placeholder.toLowerCase(),
objectName: event.target.value,
};
exists(payload);
this.setState({ firstInput: event.target.value });
onChange({ value: {
...this.state,
firstInput: event.target.value,
} }, this.props.id);
setTimeout(() => {
this.setState({ exitsStore: response });
}, 200);
setTimeout(() => {
console.log(this.state.exitsStore);
}, 1000);
}
The console logs are empty the first time "updateFirstInput()" is called and then are always one "onChange" behind from being accurate.
that is for "hello" :
[input value] [ console log of value for which presence on the server is true/false]
"h" ""
"he" "h"
"hel" "he"
"hell" "hel"
"hello" "hell"
after awhile I figured out that this was happening.
I've tried this :
const defaultProps = {
onChange: () => {
},
value: { type: '' },
provider: { type: '' },
};
class InputsComponent extends Component {
onChange = () => {
this.props.onChange(this.props.id);
};
checkExists(object){
const { exists, response } = this.props;
const payload = {
objectType: this.props.placeholder.toLowerCase(),
objectName: object,
};
exists(payload);
return response;
}
updateFirstInput(event) {
const { onChange } = this.props;
this.setState({ firstInput: event.target.value });
onChange({ value: {
...this.state,
firstInput: event.target.value,
} }, this.props.id);
const response = await this.checkExists(event);
console.log(response);
this.setState({ exitsStore: response });
console.log('stored data :');
console.log(this.state.exitsStore);
}
but for some reason people online suggesting we use await are not providing context. the above is not even compilable. (npm start will fail)
and even before that ESLint indicates that "await is a reserved word expecting newline or semicolon".
but I'm quite sure the above even with correct syntaxe wouldn't work either.
it's probably not await but how do I manage to have a filled in response from server (ideally) within a single function, the same function that calls the input update.
Constrainst :
as far as I know you can't have both onBlur and onChange on the same input so since i'm already using onChange no onBlur.
and I can't call any of this within a parent or other : there are multiple input fields as children and I need to have the value check and checkmark appear actions happen within the child to be able to match the values together.
UPDATE :
and if I simply remove the timers :
const defaultProps = {
onChange: () => {
},
value: { type: '' },
provider: { type: '' },
};
class InputsComponent extends Component {
onChange = () => {
this.props.onChange(this.props.id);
};
updateFirstInput(event) {
const { onChange, exists, response } = this.props;
const payload = {
objectType: this.props.placeholder.toLowerCase(),
objectName: event.target.value,
};
exists(payload);
this.setState({ firstInput: event.target.value });
onChange({ value: {
...this.state,
firstInput: event.target.value,
} }, this.props.id);
this.setState({ exitsStore: response });
console.log(this.state.exitsStore);
}
...TWO calls behind.

Answer 1

setState is asynchronous. It looks like you are using timeouts to try to get around this fact, but that's a very crude and brute force way to "solve" the problem and it doesn't actually solve the problem (as shown by your results).
But setState has handlers available when you need to run code "after" it. You do this simply by passing in a callback function as the second argument. E.g.;
this.setState({
exitsStore: response
}, () => {
console.log(this.state.exitsStore);
});

Answer 2

The handy pre-existing methods of React to the rescue.
In this case : componentWillRecieveProps().
componentWillReceiveProps(newProps) {
const response = newProps.response;
const old = this.props.response;
console.log(response);
const id = this.props.id;
if (response !== old && response.objectIdentifier === id) {
if (response.activ) {
if (response.isthere) {
this.setState({ inputIcon: 4 });
} else {
this.setState({ inputIcon: 3 });
}
} else {
this.setState({ inputIcon: 2 });
}
}
}
onChange = () => {
this.props.onChange(this.props.id);
};
updateInput(event) {
const { onChange, exists, response } = this.props;
const inputValue = event.target.value;
this.setState({ input: inputValue });
onChange({ value: {
...this.state,
input: inputValue,
} }, this.props.id);
if (inputValue === '') {
this.setState({ inputIcon: 0 });
} else {
const placeHolder = this.props.placeholder.toLowerCase();
const objectIdentifier = this.props.id;
const payload = {
objectType: placeHolder,
objectName: inputValue,
objectIdentifier,
};
exists(payload);
this.setState({
existStore: response,
};
}
}
the reason why this works is that componentWillRecieveProps() by default receives a parameter which is the updated props state and this one is indeed the new one. you can check that there has indeed been an update by doing as I did : checking the object you have in props against the passed parameter and only perform your actions if they are different.
I need edits on this post please, because I'm terrible at expressing this with the correct developer terms!