UseState React не обновляет данные?

Question

[VloVer]

const [lists, setLists] = useState(null);

useEffect (() => {
      async function getUser() {
         try {
           const response = await axios.get('http://localhost:3001/lists');
           const {data} = response;
           setLists(data);
           console.log(lists);
         } catch (error) {
           console.error(error);
         }
       }
       getUser() 
      axios.get('http://localhost:3001/lists').then(({ data }) => {
         let list = data;
         setLists(list);
      });
   }, [])

Я хочу получить данные с сервера использую json-server, для получения использую библиотеку axios, мне надо потом передать lists в другой компонент, и там его через map перебрать, и отрендерить, но выдает ошибку 'Cannot read property 'map' of null', это и понятно, ведь не обновляется state, и в лист null, я выводил list в другом копоненте тоже null, подскажите где ошибка, извините если она банальна, но в реакте не так давно...

Пробовал как с asynk/await так и без него, результат тот же

Answer 1

[0xD34F]

Запрос данных асинхронен, так что рендеринг с lists равным null будет выполнен в любом случае. И вот там, где вы пытаетесь lists перебирать, проверяйте, что он не null - тогда вызывать map можно. Или устанавливайте в качестве дефолтного значения вместо null пустой массив.