Вытащить значения из JSON и поместить на страницу
Получаю JSON по токену и сервера
{
"status": "OK",
"length": 2,
"rows": [
{
"artistId": 6067766,
"name": "Alice Merton"
},
{
"artistId": 705,
"name": "Muse"
}
]
}
Но сделать в React так, чтобы данные под name выводились на экран у меня не выходит.
Файл useAxios.js:
import { useState, useEffect } from 'react';
import axios from 'axios';
const useAxios = (url) => {
const SUBS_URL = ""
const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
const token = localStorage.getItem("token");
const fetchData = async () => {
try {
var config = {
method: 'get',
url: SUBS_URL,
headers: {
'Authorization': `Bearer ${token}`
}
};
axios(config)
.then(function (response) {
const userData = JSON.stringify(response.data);
localStorage.setItem("userData", userData)
console.log(userData);
});
}
catch (error) {
setIsLoading(false);
setIsError(true);
console.log(error);
}
}
const userData = localStorage.getItem("userData");
// userData = JSON.parse(userData);
alert( userData.name);
console.log("Nuber 2" + userData.name);
useEffect(() => {
fetchData();
}, []);
return { isLoading, isError, data };
};
export default useAxios;
Файл Menu:
const Menu = () => {
const searchRef = useRef();
const errRef = useRef();
const [artist, setSearch] = useState('');
const [errMsg, setErrMsg] = useState('');
const token = localStorage.getItem('token');
const userData = localStorage.getItem('userData');
const { isLoading, isError, data: name } = useAxios();
useEffect(() => {
setErrMsg('');
}, [artist])
// Нажатие
const handleSubmit = async (e) => {
e.preventDefault();
try {
console.log("Tokennn = " + localStorage.getItem("token"));
const artistId = parseInt (artist);
const response = await axios.post(ADD_URL, {artistId},{headers: {'Authorization': `Bearer ${token}`},'Content-Type': 'application/json;charset=UTF-8'} )
.then(res => {
console.log(res, token);
console.log(res.data);
})
console.log(JSON.stringify(response));
setSearch('');
} catch (err) {
if (!err?.response) {
setErrMsg('No Server Response');
}else if (err.response?.status === 401) {
setErrMsg('Unauthorized');}
errRef.current.focus();
}
}
return (
<div class="main_menu">
<button class="sidebar_btn">
<Link to="/MyArtists">My Artists</Link>
</button>
<container class = "menu">
<p ref={errRef} className={errMsg ? "errmsg" : "offscreen"} aria-live="assertive">{errMsg}</p>
<button onClick class="sidebar_btn">
<Link to="/MyArtists">MyArtists</Link>
</button>
<div class="checkLP">
<h1>CheckLP</h1>
</div>
<div class="new-search">
<input type="text" maxlength= "250" placeholder="Search" class="searchbar"
id="search"
autoComplete="off"
onChange={(e) => setSearch(e.target.value)}
value={artist}
required/>
<button onClick={handleSubmit} class="searchbtn">
</button>
</div>
<article class="post">
<div>
<h1>Using Axios</h1>
{/* здесь должно выводиться имя */}
</div>
</article>
</container>
</div>
)
}
export default Menu
Все данные из JSON с сервера получаю обратно и записываю в userData:
