Доступ к объекту ReactJS

Question

Я пытаюсь получить данные из этого API, чтобы появиться, и я всю жизнь не могу придумать, как это работает. Я могу заставить появиться sol_keys, но это все. Моей первоначальной мыслью было бы, что "средняя температура" - это что-то вроде {sol.AT.mx} и так далее для других, но не пошло. Любая помощь очень ценится.

Вот код:

const Weather = () => {
  const { data, status } = useQuery("weather", fetchWeather);
  console.log(data);

  return (
    <div>
      <h2>Mars Weather</h2>

      {status === "loading" && <div>Loading Data...</div>}

      {status === "error" && <div>Error Fetching Data</div>}

      {status === "success" && (
        <div>
          {" "}
          {data.sol_keys.map((sol) => (
            <div>Sol: {sol}</div>
            <div>Average Temp: ??? </div>
            <div>Wind Direction: ??? </div>
            <div>Season: ??? </div>
          ))}
        </div>
      )}
    </div>
  );
};

Вот что возвращает API. Ответ API

Answer 1

Если я правильно понимаю, вы ищете способ доступа к данным "sol" (на цифровых клавишах в data) и отобразить это в списке <div> элементы, где каждый <div> содержит "сол" содержание.

Простым решением было бы перебрать sol_keys подмассив data, и используйте sol_key (см. ниже) для доступа к соответствующему sol_value из data. Мы можем объединить этот процесс в одно отображение, как показано ниже:

{ status === "success" && (
    <div>
    { data.sol_keys.map((sol_key, index) => {

      /* Extract sol_value from data, for current sol_key */
      const sol_value = data[sol_key]

      /* Add index as key to each item of list being rendered */
      return  <div key={index}>
            {" "}
            <div>Sol:</div>
            <div>Average Temp: 
            { /*
            Just rendering nested objects as JSON string - 
            update this to suit your specific presentation
            requirements 
            */ }
            { JSON.stringify(sol_value.AT) } 
            </div>
            <div>Wind Direction: 
            { JSON.stringify(sol_value.WD) } 
            </div>
            <div>Season: 
            { sol_value.season } 
            </div>
        </div>      
        })
    }
    </div>
)}

Способ представления фактических данных о температуре и направлении ветра зависит от вас, но, надеюсь, это даст вам хорошую отправную точку, которая решит начальную проблему:-)