#javascript #json #reactjs
Вопрос:
import React, {useState, useEffect} from 'react'
import axios from "axios";
function Hooks() {
const [data, setData] = useState(null)
useEffect(() => {
axios.get('url')
.then((res) => setData(res.data));
}, []);
return data ?( <div>
{data.data.map(home => <div>{home.o}</div>)} //how to access the desired field, I write for the first time help
</div>
):null;
}
export default Hooks;
// json
url
{
"begin": "2021/03/08 16:00:00",
"data": {
"n": "root",
"o": [
{
"n": "1244",
"o": [
{
"n": "2021-04-27",
"o": [
{
"n": "adult",
"o": [],
"t": "age",
"v": 1,
"vd": 0
},
{
"n": "kid",
"o": [],
"t": "age",
"v": 3,
"vd": 3213
Ответ №1:
Данные.данные — это объект, поэтому вы не можете использовать его напрямую map
-вы должны сделать его итеративным, как массив. Я верю, что ты мог бы сделать это вот так:
return data ?( <div>
{[data.data].map(home => <div>{home.o}</div>)}
</div>
):null;
Вот проверяемый фрагмент кода
let data = {
"data": {
"n": "root",
"o": [{
"n": "1244",
"o": [{
"n": "2021-04-27",
"o": [{
"n": "adult",
"o": [],
"t": "age",
"v": 1,
"vd": 0
},
{
"n": "kid",
"o": [],
"t": "age",
"v": 3,
"vd": 3213
}
]
}]
}]
}
}
let d = [data.data].map(home => home.o)
console.log(d)
Ответ №2:
Ваш запрос возвращает объект и .map
для массивов, поэтому он не будет работать с этим. Однако вы могли бы это сделать…
Object.keys(data.data).map(key => data.data[key].home.o)
…as Object.keys()
возвращает массив ключей для вашего объекта, который вы можете использовать для доступа к значениям в вашем объекте так же, как при использовании любого ключа объекта. Например…
const obj = {
a: 1,
b: 2,
c: 3
}
//logs the array of keys
console.log(Object.keys(obj))
//logs the value for the key of 'a' in our object
console.log(obj["a"])
//creates an array of keys for our object
const plusOne = Object.keys(obj)
//maps through the array of keys
.map(key =>
//returns the value of each key in our object 1
obj[key] 1
)
//logs our new array with each value 1
console.log(plusOne)