Ошибка типа: data.data.map-это не функция ,я впервые пишу на js и реагирую, как получить доступ к полям, которые вам скажут. «n»: «взрослый»

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