使用 Axios 响应填充 React 下拉列表

Question

我在 React 中做了一个下拉列表，我想用来自 Axios GET 调用的响应填充它 API。

我的 API 调用在不同的脚本上。

import DIDataService from "../services/DIService";
import React from "react";

const PresetDropDown= () => {
  const [presets, setPresets] = React.useState([]);

  React.useEffect(() => {
    async function getPresets() {
      const response = DIDataService.findAllPresets()
      .catch((e) => {
        console.log(e);
      });
      setPresets(response);
    }
    getPresets();
  }, []);

  return (
    <select>
      {presets.map(item => (
        <option
          key={item.value}
          value={item.value}
        >
          {item.label}
        </option>
      ))}
    </select>
  );
}

export default PresetDropDown;

但是我在尝试映射 select:

的选项时遇到了一个严重的错误

Uncaught TypeError: presets.map is not a function
    at PresetDropDown (PresetDropDown.js:19)
    at renderWithHooks (react-dom.development.js:14985)
    at updateFunctionComponent (react-dom.development.js:17356)
    at beginWork (react-dom.development.js:19063)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at flushPassiveEffectsImpl (react-dom.development.js:23620)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority (react-dom.development.js:11276)
    at flushPassiveEffects (react-dom.development.js:23447)
    at react-dom.development.js:23324
    at workLoop (scheduler.development.js:590)
    at flushWork (scheduler.development.js:545)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)

API返回的JSON是一个数组：

[
{
"presetName": "DEFAULT",
"presetValue": "project = BD",
"id": 200001348
},
{
"presetName": "FirstTest",
"presetValue": "key = BD-1038",
"id": 200001349
},
{
"presetName": "SecondTest",
"presetValue": "key = BD-1031",
"id": 200001350
},
{
"presetName": "SecondTest",
"presetValue": "key = BD-1031",
"id": 200001351
},
{
"presetName": "SecondTest",
"presetValue": "key = BD-1031",
"id": 200001352
},
{
"presetName": "SecondTest",
"presetValue": "key = BD-1031",
"id": 200001353
},
{
"presetName": "SecondTest",
"presetValue": "key = BD-1031",
"id": 200001354
},
{
"presetName": "ThirdTest",
"presetValue": "key = BD-1039",
"id": 200001355
}
]

如何将从 Axios 获得的 JSON 映射到下拉选项？

更新 1：

我更改了我的 useEffects 挂钩以像这样使用响应：

  React.useEffect(() => {
    async function getPresets() {
      DIDataService.findAllPresets()
      .then((response) => {
        setPresets(response.data.map(({ presetName, presetValue }) => ({ label: presetName, value: presetValue })));
      })
      .catch((e) => {
        console.log(e);
      });
    }
    getPresets();
  }, []);

Answer 1

DIDataService.findAllPresets() 似乎 return 一个承诺等待或调用 then():

DIDataService.findAllPresets().then(res => setPresets(res))
//Or
const res = await DIDataService.findAllPresets();
setPresets(res)

另外，既然你说的是axios，我认为return是一个axios响应，所以你必须获取数据：

DIDataService.findAllPresets().then(({data}) => setPresets(data))
//Or
const { data } = await DIDataService.findAllPresets()
setPresets(data)

Answer 2

React.useEffect(() => {
    async function getPresets() {
      // here findAllPresets will return a promise, not the data you want to manipulate
      const response = DIDataService.findAllPresets()
      .catch((e) => {
        console.log(e);
      });
      setPresets(response);
    }
    getPresets();
  }, []);

这是一个正确的示例

React.useEffect(() => {
    async function getPresets() {
      const response = await DIDataService.findAllPresets()
      .catch((e) => {
        console.log(e);
      });
      setPresets(response);
    }
    getPresets();
  }, []);

或

React.useEffect(() => {
    function getPresets() {
      DIDataService.findAllPresets()
      .then(res => {
        setPresets(res)
      })
      .catch((e) => {
        console.log(e);
      });
    }
    getPresets();
  }, []);

使用 Axios 响应填充 React 下拉列表

Populate React dropdown with Axios response

javascript

json-deserialization

reactjs

axios