Реагировать на отображение проблемы извлеченных данных

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

...           

Итак, моя выборка работает, я протестировал ее методом formChange и я получаю результат для clientImpot.data[2].nom.

Но всякий раз, когда я пытаюсь отобразить то же самое в JSX, я получаю

TypeError: 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

Но если я объявляю это с помощью '' (или [ ]) вроде: const [clientImport, setClientImport] = useState('');

показывает: TypeError: imports.client.data is undefined

ИДК, если это может помочь, но я застрял здесь: p.

Answer 1

Проблема решена.

Мне нужно было объявить мой импорт как:

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

, например:

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

и для карты:

clientImport.map

Проблема, по-видимому, в том, что я объявил значение NULL и изменил тип, и это плохая идея для изменения типов: стр.

Answer 2

Вот почему следующие функции не запускаются по очереди.

setClientImport (data) setIsLoading (false)

Вы пытаетесь отобразить данные clinetImport, когда isLoading имеет значение false. После запуска вышеуказанных функций isLoading вначале становится ложным, а затем clientImport обновляется. Когда isLoading обновляется, реагирует на попытку рендеринга снова, но в это время clientImport имеет значение null.

Вам необходимо обновить как

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