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.
