javascript - React Hook useEffect 收到了一个依赖未知的函数。改为传递内联函数

Question

import { useEffect } from "react"
import axios from 'axios'
import WeatherDisplay from './WeatherDisplay'

const Weather = ({capital}) => {

    const [weather,setWeather] = useEffect([])

    const a_key = 'c275595564c64c757cbb51ecfe3901de'

    const params = {
        access_key: `${a_key}`,
        query: `${capital}`
    }

    const fetchWeather = (params) => {
        axios
          .get('https://api.weatherstack.com/current', {params})
          .then(response => {
            setWeather(response.data)
          })
      }
    
    useEffect(fetchWeather, [params])

    console.log(weather)

    return(
        <div>
            <h2>Weather in {capital}</h2>
            <WeatherDisplay weather={weather}/>
        </div>
    )
}
export default Weather

我将如何解决这个问题？

标签： javascriptreactjs

Answer 1

混合参数和钩子。

import { useEffect, useState } from "react" 
import axios from 'axios' 
import WeatherDisplay from './WeatherDisplay'

const Weather = ({capital, params}) => { //weather params should be provided

    const [weather, setWeather] = useState([]); // weather will be []
    const a_key = 'c275595564c64c757cbb51ecfe3901de';
    const params = {
      access_key: `${a_key}`,
      query: `${capital}`
    }
    const fetchWeather = () => {
    axios
      .get('https://api.weatherstack.com/current', {params})
      .then(response => {
        setWeather(response.data)
      })
    }

    useEffect(fetchWeather, []);// dependency array probably should be empty
    return(
       <div>
        <h2>Weather in {capital}</h2>
        <WeatherDisplay weather={weather}/>
       </div>)
} 
export default Weather