javascript - 访问对象 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 Response

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

实际温度和风向数据的呈现方式由您决定，但希望这能为您提供一个解决初始问题的良好起点:-)