快速反应 useState 和 useEffect

时间:2021-04-09 12:45:22

标签: javascript reactjs react-hooks

我正在尝试将旧样式的 React 类转换为使用 useState 和 useEffect 而不是 this.setState 和 componentDidMount 的新函数,但无法使其正常工作 - 谁能帮我看看我在做什么错误 - 发现钩子很混乱 - 谢谢

import React,{useState,useEffect} from 'react';

const App = function() {
  function  getWeather(){
      fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=6e93b3d15872f914c6929fed9ea71e9a')
        .then(data => data.json())
        .then(data => {
            return data
        })
  
  }
  const[weatherData,setData] = useState(getWeather())

  useEffect(()=>{
    setData(getWeather)
  },[])
  
    
    return(<div>
    
    {weatherData.main.temp}
    
    </div>)
  
}

export default App;

1 个答案:

答案 0 :(得分:1)

请尝试这样。

import React,{useState,useEffect} from 'react';

const App = function() {
  function  getWeather(){
      fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=6e93b3d15872f914c6929fed9ea71e9a')
        .then(data => data.json())
        .then(data => {
            setData(data);
        })
  
  }
  const[weatherData,setData] = useState([])

  useEffect(()=>{
    getWeather();
  },[])
  
    
    return(<div>
    
    {weatherData.main?weatherData.main.temp:""}
    
    </div>)
  
}

export default App;