3

我正试图从这个 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 响应

4

1 回答 1

3

如果我理解正确，您正在寻找一种方法来访问“sol”数据（在 中的数字键上data）并将其呈现到<div>每个<div>包含“sol”内容的元素列表中。

一个简单的解决方案是迭代 的sol_keys子数组data，并使用sol_key（见下文）访问相应sol_value的 from 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>
)}

实际温度和风向数据的呈现方式取决于您，但是希望这可以为您提供一个很好的起点来解决最初的问题 :-)

于 2020-08-20T04:46:43.297 回答