javascript - useEffect 触发并运行打印语句但没有实际的 axios.post 调用运行 reactjs

Question

我有一个 useEffect 函数，由于 yearsBackSettings 更改而触发，并且 useEffect 中的 console.log 语句也触发:

useEffect(() => {
    console.log("something changed")
    console.log(yearsBackSettings)
    if (userId) {
      const user_profile_api_url = BASE_URL + '/users/' + userId
      const request_data = {
        searches: recentSearches,
        display_settings: displaySettings,
        years_back_settings: yearsBackSettings
      }

      console.log("running user POST")
      console.log(request_data)

      axios.post(user_profile_api_url, request_data)
        .then(response => {
          console.log("user POST response")
          console.log(response)
        })
    }


  }, [recentSearches, displaySettings, yearsBackSettings])

如图所示，更改 yearsBackSettings 会导致它运行，它应该使用所有新设置发出发布请求:

但是，由于某种原因，除了股票搜索运行外，服务器上没有发生任何事情:

the last updated time for stock ibm before save: 08/25/2022 08:13:30
stock was updated within the last 5 minutes...no need to make an api call
the last updated time for stock ibm after save: 08/25/2022 08:13:30
[25/Aug/2022 08:17:25] "POST /users/114260670592402026255 HTTP/1.1" 200 9
[25/Aug/2022 08:17:25] "GET /dividends/ibm/3/5 HTTP/1.1" 200 4055
the last updated time for stock ibm before save: 08/25/2022 08:13:30
stock was updated within the last 5 minutes...no need to make an api call
the last updated time for stock ibm after save: 08/25/2022 08:13:30
[25/Aug/2022 08:17:26] "GET /dividends/ibm/27/5 HTTP/1.1" 200 8271
the last updated time for stock ibm before save: 08/25/2022 08:13:30
stock was updated within the last 5 minutes...no need to make an api call
the last updated time for stock ibm after save: 08/25/2022 08:13:30
[25/Aug/2022 08:18:11] "GET /dividends/ibm/27/70 HTTP/1.1" 200 14734

当用户加载时，发给用户的帖子是初始的。如果我登录并退出，我将失去第二部分中的 70 年:

当我注销并登录时，它显示 27 年和 5 年，我丢失了 70，因为/users POST 没有运行

我有以下 React 主要组件

import React, {useState, useEffect} from 'react';
import { connect } from 'react-redux';

import axios from 'axios';


const SearchPage = ({userId}) => {

  const [recentSearches, setRecentSearches] = useState([DEFAULT_STOCK]);
  const [dividendsYearsBack, setDividendsYearsBack] = useState('3');
  const [debouncedDividendYearsBack, setDebouncedDividendYearsBack] = useState('3');
  const [earningsYearsBack, setEarningsYearsBack] = useState('5');
  const [debouncedEarningsYearsBack, setDebouncedEarningsYearsBack] = useState('5');
  const [errorMessage, setErrorMessage] = useState('');

  )
  const [displaySettings, setDisplaySettings] = useState([
      {setting_name: 'showYieldChange', visible: true},
      {setting_name: 'showAllDividends', visible: true},
      {setting_name: 'showAllEarnings', visible: true},
  ])
  const [yearsBackSettings, setYearsBackSettings] = useState([
      {section: 'dividendsYearsBack', years_back: 3},
      {section: 'earningsYearsBack', years_back: 5}
  ])

  const onTermUpdate = (term) => {
    const trimmed = term.trim()
    setTerm(trimmed);
  }

  debounceTerm(setDebouncedTerm, term, 1500);
  debounceTerm(setDebouncedDividendYearsBack, dividendsYearsBack, 1500);
  debounceTerm(setDebouncedEarningsYearsBack, earningsYearsBack, 1500);

  useEffect(() => {runSearch()}, [debouncedTerm]);

  useEffect(() => {
    // alert(dividendsYearsBack)
    if (dividendsYearsBack !== '' && earningsYearsBack !== '') {
      runSearch();
    }
  }, [debouncedDividendYearsBack, debouncedEarningsYearsBack])

  useEffect(() => {
    const yearsSettingsCopy = Object.assign(yearsBackSettings);
    const dividendsYearsBackSetting = yearsSettingsCopy.find((dict) => dict.section == 'dividendsYearsBack');
    dividendsYearsBackSetting.years_back = dividendsYearsBack;
    const earningsYearsBackSetting = yearsSettingsCopy.find((dict) => dict.section == 'earningsYearsBack');
    earningsYearsBackSetting.years_back = earningsYearsBack;
    setYearsBackSettings(yearsSettingsCopy);

  }, [dividendsYearsBack, earningsYearsBack])

  useEffect(() => {
    const dividendsYearsBackSetting = yearsBackSettings.find((dict) => dict.section == 'dividendsYearsBack');
    setDividendsYearsBack(dividendsYearsBackSetting.years_back);
    const earningsYearsBackSetting = yearsBackSettings.find((dict) => dict.section == 'earningsYearsBack');
    setEarningsYearsBack(earningsYearsBackSetting.years_back);
  }, [yearsBackSettings])

  useEffect(() => {
    console.log("user id changed")
    if (userId) {
      const user_profile_api_url = BASE_URL + '/users/' + userId
      axios.get(user_profile_api_url, {})
        .then(response => {
          // console.log(response)

          const recent_searches_response = response.data.searches;
          const new_recent_searches = [];
          recent_searches_response.map(dict => {
            new_recent_searches.push(dict.search_term)
          })
          setRecentSearches(new_recent_searches);
          setDisplaySettings(response.data.display_settings);
          setYearsBackSettings(response.data.years_back_settings);

        })
        .catch((error) => {
          console.log("error in getting user profile: ", error.message)
        })
    }
  }, [userId])

  useEffect(() => {
    console.log("something changed")
    console.log(yearsBackSettings)
    if (userId) {
      const user_profile_api_url = BASE_URL + '/users/' + userId
      const request_data = {
        searches: recentSearches,
        display_settings: displaySettings,
        years_back_settings: yearsBackSettings
      }

      console.log("running user POST")
      console.log(request_data)

      axios.post(user_profile_api_url, request_data)
        .then(response => {
          console.log("user POST response")
          console.log(response)
        })
    }


  }, [recentSearches, displaySettings, yearsBackSettings])



  return (

      <div className="ui segment">
        {renderMainContent()}
      </div>
    </div>
  )
}


const mapStateToProps = state => {
  return { userId: state.auth.userId };
};

export default connect(
  mapStateToProps
)(SearchPage);

// export default SearchPage;

显示的 yearsBackSettings 已更改为 27 和 70(从图片中看)，但 POST 请求未触发。当设置更改时，如何保存这些设置？

问题是当我更新多年前的设置时帖子没有运行:

  useEffect(() => {
    console.log("running user profile post");
    const user_profile_api_url = BASE_URL + '/users/' + userId
    const request_data = {
      searches: recentSearches,
      display_settings: displaySettings,
      years_back_settings: yearsBackSettings
    }

    axios.post(user_profile_api_url, request_data)
      .then(response => {
        console.log(response)
      })

  }, [recentSearches, displaySettings, yearsBackSettings])

这不会在 yearsBackSettings 更改时运行。我正在将 yearsBackSettings 记录到控制台并且它肯定已更改，但是对用户配置文件的发布请求不会触发

我认为问题出在这里:

  useEffect((

) => {
    const dividendsYearsBackSetting = yearsBackSettings.find((dict) => dict.section == 'dividendsYearsBack');
    dividendsYearsBackSetting.years_back = dividendsYearsBack;
    const earningsYearsBackSetting = yearsBackSettings.find((dict) => dict.section == 'earningsYearsBack');
    earningsYearsBackSetting.years_back = earningsYearsBack;
    setYearsBackSettings(yearsBackSettings);

  }, [dividendsYearsBack, earningsYearsBack])

例如，我尝试对 yearsBackSettings 执行任何 useEffect，但它从未奏效。我已经更改了几次设置，但警报没有触发:

useEffect(() => {
    alert("years back settings changed")
  }, [yearsBackSettings])

Answer 1

问题出在您的 python 服务器代码中，在您的控制台中，您可以看到您实际上正在记录一个响应代码为 200 的响应对象，这意味着您的服务器在实际请求期间不会崩溃。

您的服务器端日志记录可能存在问题，导致请求未显示，我会先查看。