javascript - 如何映射来自 REST 调用的响应？

标签 javascript reactjs axios

<分区>

我有以下代码，我在其中进行 REST 调用并将结果分配给变量。

然后我使用结果映射并创建带有 Prop 的组件。

但目前它会抛出一个错误，因为列表的值是未定义的。

我相信这是因为当我尝试映射时列表的值尚未设置，因为 axios 异步调用尚未完成。

因此有 2 个查询。

我应该如何使用响应值。我将它分配给变量“列表”的方法是正确的还是应该以不同的方式完成？
如何等待列表被填充然后映射到它？

您可以通过查看以下端点来了解 response.data 的外观:https://sampledata.free.beeceptor.com/data1

示例响应数据:

[
    {
        "word": "Word of the Day",
        "benevolent": "be nev o lent",
        "adjective": "adjective",
        "quote": "well meaning and kindly.<br/>a benevolent smile",
        "learn": "LEARN MORE"
    },
    {
        "word": "Word of the Day",
        "benevolent": "be nev o lent",
        "adjective": "adjective",
        "quote": "well meaning and kindly.<br/>a benevolent smile",
        "learn": "LEARN MORE"
    }
]

客户端代码:

const App = () => {

  // const cardData = useSelector(state => state.cardData)
  let list;

  useEffect(() => {
    axios.get('https://sampledata.free.beeceptor.com/data1')
      .then(response => {
        list = response.data;
        list.forEach(l => console.log(l))
      })
      .catch(error => {
        console.log(error)
      })
  }, [])

  return (
    <>
      <ButtonAppBar/>
      <div className='container'>
        <div className='row'>
          {
            list.map((data) => {
              const {word, bene, adj, well, learn} = data;
              return (
                <div className='col-lg-3 col-md-6 format'>
                  <SimpleCard word={word} bene={bene} adj={adj} well={well} learn={learn} />
                </div>
              )
            })
          }
        </div>
      </div>
    </>
  );
}

export default App;

最佳答案

您需要使用 useState 来存储您从 API 获取的数据。

例如

const [state, setState] = useState({ list: [], error: undefined })

因为 API 调用是异步的，只有在组件第一次挂载后数据才会可用。您需要使用条件来检查 state.list.length 否则它会抛出错误 cannot read property ..x of undefined。

const App = () => {

  // create a state variable to store the data using useState
  const [state, setState] = useState({ list: [], error: undefined });

  useEffect(() => {
    axios
      .get("https://sampledata.free.beeceptor.com/data1")
      .then(response => {
        setState(prevState => ({
          ...prevState,
          list: [...prevState.list, ...response.data]
        }));
      })
      .catch(error => {
        setState(prevState => ({ ...prevState, list: [], error: error }));
      });
  }, []);

  return (
    <>
      <ButtonAppBar/>
      <div className='container'>
        {
           // you can show a loading indicator while your data loads
           !state.list.length && <div>The data is loading....</div>
        }

        <div className='row'>
          {
            state.list.length && state.list.map((data) => {
              const {word, bene, adj, well, learn} = data;
              return (
                <div className='col-lg-3 col-md-6 format'>
                  <SimpleCard word={word} bene={bene} adj={adj} well={well} learn={learn} />
                </div>
              )
            })
          }
        </div>
      </div>
    </>
  );
}

关于javascript - 如何映射来自 REST 调用的响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62029882/

上一篇：javascript - promise 的值究竟是如何更新的？

下一篇：javascript - 基于路由参数的服务器端渲染动态页面

javascript - 无法弄清楚为什么数字不会增加

reactjs - react : apply hover to all elements inside parent div

javascript - 类型错误 : Cannot read properties of undefined (reading 'document' )

javascript - 使用 axios 向服务器发出请求会卡住 React Native 应用程序

javascript - Express 中间件中的 Axios 出现错误 - 发送 header 后无法发送 header

javascript - 使用 bootstrap-vue 运行 jest

javascript - 将变量从对象内部传递到 setTimeout

javascript - React 函数/Hooks 组件上的 componentDidMount 等价物？

vue.js - 如何在全局范围内将 axios/axios 拦截器附加到 Nuxt？