React显示提取的数据问题

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中显示相同的东西时，我都会得到

TypeError:clientImport为null。

上面的版本给了我错误。当我删除{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

但如果我用"(或[](这样声明：const [clientImport, setClientImport] = useState('');

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

我不知道这是否有帮助，但我有点困在这里：p。

Answer 1

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

setClientImport(数据(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。