Question

我们正在尝试从 openweather.org 获取数据，我们希望在页面加载时只运行一次的 useEffect 中调用一次获取。我们希望能够从搜索表单中再次调用 fetch，因此为了避免重复代码，我们不希望我们的 fetch 位于 useEffect 函数中。

import { useDispatch, useSelector } from 'react-redux';
import { setWeather } from '../actions/weatherAction';
import { useCallback, useEffect } from 'react';
import Weather from './weather';

function GetWeather() {
  console.log('what up yo?') // 1. Logs
  const dispatch = useDispatch();

  const weather = useSelector(state => state.weather);

  console.log(weather) // 2. Logs an empty object as expected

  // async function fetchWeather() {
  //   console.log('fetching')
  //   const response = await fetch('https://api.openweathermap.org/data/2.5/weather?q=stockholm&appid=1dc27327c1655e53a85e6e5a889fccee');
  //   console.log('response:', response);
  //   const data = await response.json();
  //   console.log('data:', data);
  //   dispatch(setWeather(data));
  // } This is what we initially tried together with useEffect(() => { fetchWeather() }, []) which seemed to work sometimes but not every time.

  const fetchWeather = useCallback(() => {
    console.log('fetching'); // 4. Does not log!
    return fetch('https://api.openweathermap.org/data/2.5/weather?q=stockholm&appid=1dc27327c1655e53a85e6e5a889fccee')
      .then(response => response.json())
        .then(data => dispatch(setWeather(data)))
  }, [dispatch])

  // useEffect(() => {
  //     console.log('useEffect: ', weather);
  // }, [weather]);

  useEffect(() => {
    console.log('calling fetch'); // 3. Does not log!
    fetchWeather();
  }, [fetchWeather]);
  
  return (
    <main if={ weather.weather }>
      <Weather weather={ weather }/>

      <button onClick={ fetchWeather }>Go!</button>
    </main>
  )
}

export default GetWeather;

减速器：

const initState = {
    weather: {}
};

export const weatherReducer = (state = initState, action) => {
    switch (action.type) {
        case 'SET_WEATHER':
            return {
                ...state,
                weather: action.payload
            };
        default:
            return state;
    }
};

行动：

export const setWeather = (weather) => {
    return {
        type: 'SET_WEATHER',
        payload: weather
    };
};

来自失眠症的数据：

{
  "coord": {
    "lon": 2.159,
    "lat": 41.3888
  },
  "weather": [
    {
      "id": 800,
      "main": "Clear",
      "description": "clear sky",
      "icon": "01d"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 291.36,
    "feels_like": 291.01,
    "temp_min": 288.47,
    "temp_max": 293.7,
    "pressure": 1017,
    "humidity": 68
  },
  "visibility": 10000,
  "wind": {
    "speed": 0.45,
    "deg": 307,
    "gust": 4.02
  },
  "clouds": {
    "all": 0
  },
  "dt": 1622266137,
  "sys": {
    "type": 2,
    "id": 2003688,
    "country": "ES",
    "sunrise": 1622262117,
    "sunset": 1622315758
  },
  "timezone": 7200,
  "id": 3128760,
  "name": "Barcelona",
  "cod": 200
}

存储（index.js）：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { weatherReducer } from './reducers/weatherReducer';

const store = createStore(weatherReducer);

console.log(store);

ReactDOM.render(
    <React.StrictMode>
    <Provider store={store}>
        <App />
    </Provider>
    </React.StrictMode>,
    document.getElementById('root')
);

reportWebVitals();

在阅读有关此主题的另一个问题后，我们尝试使用 useCallback，但无济于事。不过，我们可以使用 Insomnia 获取数据。

Answer 1

请从 fetchWeather 数组中删除 useEffect：

useEffect(() => {
    console.log('calling fetch');
    
    fetchWeather();
  }, []);

这里的问题是，当 useEffect 数据初始化或更新时（当您将 fetchWeather 放在 [fetchWeather] 上）时，会调用 useEffect。由于 fetchWeather 在 useEffect 中被初始化和调用，所以它什么也没做。现在，useEffect 函数在 componentDidMount, componentDidUdate 时被调用。

请找到更多使用 React 钩子 here 的规则。

编辑：问题的真正解决方案（假设 JSX，action 和 reducer 工作正常）：

    import { useDispatch, useSelector } from 'react-redux';
    import { setWeather } from '../actions/weatherAction';
    import { useCallback, useEffect, useState } from 'react';
    import Weather from './weather';
    
    function GetWeather() {
      const [fetchData, setFetchData] = useState(false);
      const dispatch = useDispatch();
      {/*Make sure your action, reducer are working perfectly*/}
      const weather = useSelector(state => state.weather);
      
      useEffect(() => {
        if(fetchData) dispatch(setWeather());
      }, [fetchData]);
      
      return (
        <main if={ weather.weather }>
          <Weather weather={ weather }/>
    
          <button onClick={()=>setFetchData(true)}>Go!</button>
        </main>
      )
    }
    
    export default GetWeather;

我们的 useEffect 不会调用我们的 fetch 函数

1 个答案: