尽量不迟一次收到回复

所以我有一个输入:

一旦更改此输入的值,get就会更新并存储在props中以实现持久性,但这与问题无关。

如果在数据库中找到输入的值,我将在字段旁边添加一个复选标记。

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;
    }
};

注意,上面的控制台日志正确地打印了真/假值(+发送的值。我从服务器返回了这两个值)。

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);
        }

控制台日志在第一次调用“updateFirstInput()”时是空的,然后总是比准确度低一个“onChange”。

这表示“你好”:

[input value] [ console log of value for which presence on the server is true/false]
"h"              ""
"he"             "h"
"hel"            "he"
"hell"           "hel"
"hello"          "hell"

我试过这个:

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);
}

但出于某种原因,网上建议我们使用await的人并没有提供语境。以上内容甚至不可编译。(npm启动将失败)

这可能不是等待,但我如何在一个函数中(理想情况下)获得来自服务器的填充响应,该函数与调用输入更新的函数相同。

约束:

据我所知,不能在同一个输入上同时使用onBlur和onChange,因为我已经在使用onChange no onBlur了。

更新:

如果我简单地去掉计时器:

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);
    }