我正在处理一个 React 项目,并在尝试显示我刚获取的数据时遇到问题。

...

const [clientImport, setClientImport] = useState(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
  fetchData();
}, []);
const fetchData = async() => {
  setIsLoading(true);
  const result = await axios.get('http://localhost:8080/client');
  setClientImport(result);
  console.log(result);
  console.log(clientImport);
};
const formChange = (e) => {
  setIsLoading(false);
  console.log(clientImport.data[2].nom);
  const value = e.target.value;
  setState({
    ...state,
    [e.target.name]: value
  })
}
return <div>
          <Calendar getDate={getDate}/>
             <Form> {isLoading ? (<div>Loading ...</div>) : (<div>aze and {clientImport.data[2].nom}</div>)}

...           

所以我的 fetch 工作正常,我在formChange方法中测试了它,我得到了clientImpot.data[2].nom

但是每当我尝试在 JSX 中显示相同的内容时,我都会得到一个

类型错误:clientImport 为空。

上面的版本给了我错误。 当我删除{clientImport.data[2].nom}它工作正常。

每当我尝试将任何clientImport值显示到返回中时,它都不起作用。

这只是为了调试我放在那里的,目标是把它放在那里最终映射:

<Form.Group as={Col} lg={5} controlId="formClient">
  <Form.Label>Client - </Form.Label>
  <Form.Control as="select" onChange={updateClientChoice}>
    <option key={-2} ></option>
    <option key={-1} value="newClient">Ajouter un nouveau client</option>
    {clientImport.data.map((c, i) => (
    <option key={i} value={c.id}>{c.name} - {c.prenom} - {}</option>))}
  </Form.Control>
</Form.Group>

谢谢你的帮助 ;)。

编辑:有关更多信息:

当我这样做时: const [clientImport, setClientImport] = useState(null);

与此: clientImport.data.map

它返回: TypeError: clientImport is null

但是,如果我用 ''(or[]) 声明它,例如: const [clientImport, setClientImport] = useState('');

它显示: TypeError: imports.client.data is undefined

我知道这是否有帮助,但我有点卡在这里:p。

#1楼 票数:0

这就是为什么不依次运行以下函数的原因。

setClientImport(data) setIsLoading(false)

当 isLoading 为 false 时,您尝试显示 clinetImport 数据。 一旦运行上述函数,isLoading 首先变为 false,然后更新 clientImport。 当 isLoading 更新时,react 尝试再次渲染,但此时 clientImport 为 null。

你需要像这样更新

<Form>      {isLoading || clientImport === null? (
                                        <div>Loading ...</div>
                                      ) : (<div>aze and {clientImport.data[2].nom}</div>)}

#2楼 票数:0

问题解决了。

我需要将我的导入声明为:

const [clientImport, setClientImport] = useState([]);

获取如下:

const result = await axios.get('http://localhost:8080/client');
        setclientImport(result.data);

和地图:

clientImport.map

问题显然是因为我声明为 null 并更改了类型,更改类型是一个坏主意:p。

  ask by Tisiphera translate from so

未解决问题?本站智能推荐:

3回复

无法在反应中显示获取的API数据

我是 React 的完全初学者,我正在从https://www.boredapi.com/documentation#endpoints-price获取数据。 使用http://www.boredapi.com/api/activity/你会得到一个随机的活动对象,格式为 我正在尝试使用 react
2回复

获取数据反应.map不是函数

为什么这段代码给我: TypeError: items.map is not a function ?
2回复

反应:在onSubmit而不是onChange上获取数据

我让这段代码按照我想要的方式工作。 但是,它会在每次击键后获取和显示数据。 当我点击提交时,我只希望它获取一次。 另外,如果我正在做的任何事情不是“最佳实践”,请告诉我,这样我以后就不会犯愚蠢的错误。import React, { useEffect, useState } from "react"
1回复

反应钩子/上下文和弹性UI。函数组件中获取数据(REST)的问题

我对 React Hooks/Context 很陌生,所以我很感激一些帮助。 请不要用你锋利的牙齿扑向我。 我检查了其他解决方案和我以前做过的一些方法,但似乎无法通过“从列表中选择”的方式获得它。 概括我需要在我的 Search.js 中的 const 'allMunicipios'(对象数组)中获
2回复

使用反应钩子显示来自jsonplaceholderapi的数据

我有简单的休息 api,我正在尝试显示来自 jsonplaceholder fake api 的用户这是我的功能组件 不幸的是,我收到以下错误: 我的代码有什么问题?
2回复

在反应钩子中获取没有正确的数据

以下是在初始加载时间运行良好的代码,但在单击“获取数据”按钮时,它现在可以正确获取数据。 让我知道我在这里做错了什么。 代码 - CodeSandBox - https://codesandbox.io/s/black-mountain-y8xpl 预期结果 - 初始加载 - 3 个标题 单击“
7回复

反应useReducer异步数据获取

我正在尝试使用新的 react useReducer API 获取一些数据,并停留在我需要异步获取它的阶段。 我只是不知道如何:/ 如何将数据提取放在 switch 语句中,或者这不是应该如何完成的方式? 我试图这样做,但它不适用于 async ;(
2回复

使用反应钩子从API重新获取数据

我是 React 的完全初学者,我编写了一个 fetch 组件,它使用 usefetch 函数从 API 返回数据。 在我的应用程序中,我可以手动更改输入以从 API 获取不同的数据,但我想要的是有一个输入字段和一个按钮,当点击它时,它会从 API 返回新数据。 使用下面的代码,我只能在组件安装时获