Question

我的组件有一个输入框，有时它会在用户输入输入时从 Api 获取数据，并使用输入值和响应触发回调。我的组件并不总是调用 API。它决定根据输入值调用 api。

问题是如果你输入的太快，回调会被错误的值触发。

用户类型“a”（未发出 Api 请求）
用户类型“a0”（为“a0”发出 Api 请求）
用户在响应到达之前输入新值（“a1”）
api 响应到达，回调被触发，错误值“a1”而不是“a0”

（我使用 Saga 和 redux 来处理 api 请求）

function* myTask(
    action
) {
    try {
        const response = yield call(myApiPromise,action.meta.value);
        yield put(
            myAction.makeSuccessAction(
                response,
                action.meta
            )
        );
    } catch (e) {
        yield put(myAction.makeErrorAction(e, action.meta));
    }
}


function* mySaga() {
    yield takeLatest(
        myAction.type,
        myTask
    );
}

const myComponent = ({
    callback,
    dispatchApi,
    apiResponse
}) => {
    const [value, setValue] = useState("");
    useEffect(() => {
        if (apiResponse) {
            callback(value, apiResponse);
        }
    }, [callback, apiResponse, value]);

    const handleChange = (e) => {
        setValue(e.target.value);
        if (e.target.value.contains("0")) {
            dispatchApi(e.target.value);
        };
    };
    return ( <input value = {value} onChange = {handleChange} />);
}

使用异步操作保持正确的组件状态

0 个答案: