未处理的拒绝（TypeError）：无法在 React-hooks 中设置 属性 'innerText' of null

Question

我想做一个天气应用。但是字符串没有出现在我想要的组件上

如何在 React 中使用 innerText？

这是我的Weather.jsx

import React from "react";

const Weather = () => {
  const API_KEY = '123456789';
  const COORDS = "coords";
  const weather = document.getElementById("weather");

  const getWeather = (lat, lng) => {
    fetch(
      `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`
    )
      .then(function (response) {
        return response.json();
      })
      .then(function (json) {
        const temperature = json.main.temp;
        const place = json.name;
        weather.innerText = `${temperature}℃,\n ${place}`;
      });
  };
};
export default Weather;

这是显示天气的屏幕代码。

import React from "react";
import styled from "styled-components";
import Weather from "../../Components/Weather";

const DetailPresenter = () => {
  
  return (
    <>
      <DetailContainer>
        <div id="weather">{Weather()}</div>  
      </DetailContainer> 
    </>
  );
};
export default DetailPresenter;

Answer 1

这不是 React 渲染的方式 UI。我们不直接调用函数，而是将它们渲染到 JSX“模板”中，以便 React 在必要时调用。没有调用您的 getWeather 函数来 实际上 获取天气数据。此外，直接 DOM 操作是反应中的反模式。

1. 将要显示的文本保存到本地组件状态。
2. 渲染它。您的 Weather 组件目前 return 未定义，这对 React 无效，组件 必须 return 有效的 JSX。

天气

const Weather = () => {
  const API_KEY = '123456789';
  const COORDS = "coords";
  const [weather, setWeather] = React.useState('');

  const getWeather = (lat, lng) => {
    fetch(
      `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`
    )
      .then(function (response) {
        return response.json();
      })
      .then(function (json) {
        const temperature = json.main.temp;
        const place = json.name;
        setWeather(`${temperature}℃,\n ${place}`);
      });
  };

  React.useEffect(() => {
    getWeather(......lat & long);
  }, []); // <-- run effect once on component mount

  return weather; // <-- string is valid JSX
};

DetailPresenter

import React from "react";
import styled from "styled-components";
import Weather from "../../Components/Weather";

const DetailPresenter = () => {
  
  return (
    <DetailContainer>
      <Weather /> // <-- render component, don't invoke
    </DetailContainer> 
  );
};