反应显示获取的数据问题

Question

我正在处理一个 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。

Answer 1

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

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>)}

Answer 2

问题解决了。

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

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

获取如下：

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

和地图：

clientImport.map

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