React使用fetch填充select下拉框时body参数报类型错误如何解决

问题根源 #

fetch与axios的传参逻辑存在差异：axios会自动将传入的普通JS对象序列化为JSON字符串，但原生fetch要求body字段必须是BodyInit类型（支持字符串、FormData、Blob、URLSearchParams等格式），不支持直接传入普通JS对象，因此触发类型不兼容报错。

修复方案 #

• 手动将body中的JS对象通过JSON.stringify()转为JSON字符串
• 补全URL中的page、size查询参数，与之前可正常运行的axios逻辑保持一致，避免接口返回异常
• TypeScript环境下可给requestMethod显式标注RequestInit类型，进一步规避类型报错

修正后代码 #

const loadOptions = async (searchQuery, loadedOptions, { page }) => {
    // 非TypeScript环境请删除下面的: RequestInit类型注解
    const requestMethod: RequestInit = {
        // 如果接口实际要求POST方法，请和之前的axios逻辑保持一致改为POST
        method: "PUT",
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ realmIds: [props.realmScelto] })
    };
    // 补充分页查询参数
    const response = await fetch(`myapi?page=${page}&size=20`, requestMethod)
    const optionToShow = await response.json()
    return {
        options: optionToShow,
        hasMore: optionToShow.length >= 1,
        additional: {
            page: searchQuery ? 2 : page + 1,
        },
    };
};

const onChange = option => {
    if (typeof props.onChange === 'function') {
        props.onChange(option);
    }
};

return (
    <AsyncPaginate
        value={props.value}
        loadOptions={loadOptions}
        onChange={onChange}
        isSearchable={true}
        placeholder="Select"
        additional={{
            page: 0,
        }}
    />
);

内容的提问来源于stack exchange，提问作者Jack23