Как исправить ситуацию, при которой `data` остаётся пустым, даже когда используется следующий синтаксис:
```javascript
const Spisok = () => {
const token = localStorage.getItem("token");
const [user, setUser] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users', {
method: 'GET',
headers: {
"Content-Type": "application/json",
'Authorization': `Bearer ${token}`
},
})
.then((res) => res.json())
.then((data) => {
setUser(data);
});
}, []);
return (
<>
{user.map((u) => {
return (
<div>
<p>{u.name}</p>
</div>
)
})}
</>
)
}
export default Spisok;
```
Почему `res` также оказывается пустым в данном коде? Как исправить это?
Проблема заключается в том, что ваш компонент вызывает `fetch` до того, как `token` будет загружен из `localStorage`. В результате запрос отправляется без токена авторизации, что может привести к пустому ответу.
Для решения этой проблемы вы можете проверить, есть ли `token` в `localStorage` перед выполнением запроса. Вот как можно это сделать:
```javascript
const Spisok = () => {
const [user, setUser] = useState([]);
useEffect(() => {
const token = localStorage.getItem("token");
if (token) {
fetch('https://jsonplaceholder.typicode.com/users', {
method: 'GET',
headers: {
"Content-Type": "application/json",
'Authorization': `Bearer ${token}`
},
})
.then((res) => res.json())
.then((data) => {
setUser(data);
});
}
}, []);
return (
<>
{user.map((u) => {
return (
<div key={u.id}>
<p>{u.name}</p>
</div>
)
})}
</>
)
}
export default Spisok;
```
Таким образом, код будет проверять наличие токена перед отправкой запроса, и только в случае наличия токена выполнит запрос с правильным заголовком авторизации. Пожалуйста, убедитесь, что у вас есть токен в `localStorage` перед вызовом компонента `Spisok`.
.then((res) => { res.json() })
коллбэк ничего не возвращает
Во втором варианте вы забыли вернуть результат res.json(), из-за чего data становится undefined. Добавьте return res.json() в первом .then().