在 state 更改上运行 function 后，useState 默认值似乎重新运行，默认值不应运行两次

Question

I have the following issue with website where the settings state resets after running more searches. The settings component is show below in the picture, it usually works but if you uncheck a box and then run a few more searches at some point the showAllDividends setting will be set to false, the All dividends component won't be on the screen, but for some reason the checkbox itself is checked (true). This is my first time really working with checkboxes in React, and I think I'm using the onChange feature wrong. Right now I get the event.target.checked boolean, but only onChange.

If that isn't the issue then the most likely cause is the default statements being run again on another render:

  const [showMainInfo, setShowMainInfo] = useState(true);
  const [showYieldChange, setShowYieldChange] = useState(true);
  const [showAllDividends, setShowAllDividends] = useState(true);

the thing is I don't see why the default statements would run more than once, the component isn't being destroyed there's no react router usage. I expected it to keep its current state after the page is first loaded. I think the settings defaults are being rerun, but just don't understand why they would.

I unchecked, checked, unchecked the 'All dividends' checkbox, and it was unchecked when I ran 2 more searches. After the second search the checkbox was checked but the component was gone, because showAllDividends was false

main component SearchPage.js:

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

import axios from 'axios';

import SearchBar from './SearchBar';
import AllDividendsDisplay from './dividend_results_display/AllDividendsDisplay';
import DividendResultsDisplay from './dividend_results_display/DividendResultsDisplay';
import SettingsView from './settings/SettingsView';

const HOST = process.env.REACT_APP_HOSTNAME
const PROTOCOL = process.env.REACT_APP_PROTOCOL
const PORT = process.env.REACT_APP_PORT
const BASE_URL = PROTOCOL + '://' + HOST + ':' + PORT

const SearchPage = ({userId}) => {

  const DEFAULT_STOCK = 'ibm';
  const [term, setTerm] = useState(DEFAULT_STOCK);
  const [debouncedTerm, setDebouncedTerm] = useState(DEFAULT_STOCK);
  const [loading, setLoading] = useState(false);
  const [recentSearches, setRecentSearches] = useState([DEFAULT_STOCK]);
  const [dividendsYearsBack, setDividendsYearsBack] = useState('3');
  const [debouncedDividendYearsBack, setDebouncedDividendYearsBack] = useState('3');
  const [errorMessage, setErrorMessage] = useState('');
  const [dividendsData, setDividendsData] = useState(
    {
      current_price: '',
      recent_dividend_rate: '',
      current_yield: '',
      dividend_change_1_year: '',
      dividend_change_3_year: '',
      dividend_change_5_year: '',
      dividend_change_10_year: '',
      all_dividends: [],
      name: '',
      description: '',
    }
  )
  const [settingsViewVisible, setSettingsViewVisible] = useState(false);

  const [showMainInfo, setShowMainInfo] = useState(true);
  const [showYieldChange, setShowYieldChange] = useState(true);
  const [showAllDividends, setShowAllDividends] = useState(true);

  const onTermUpdate = (term) => {
    setTerm(term)
  }

  // TODO: write a custom hook that debounces taking the term and the set debounced term callback
  useEffect(() => {
    const timerId = setTimeout(() => {
      setDebouncedTerm(term);
    }, 1500);

    return () => {
      clearTimeout(timerId);
    };

  }, [term]);

  useEffect(() => {
    const timerId = setTimeout(() => {
      setDebouncedDividendYearsBack(dividendsYearsBack);
    }, 1500);

    return () => {
      clearTimeout(timerId);
    };

  }, [dividendsYearsBack]);

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

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

  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 => {
          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);
        })
        .catch((error) => {
          console.log("error in getting user profile: ", error.message)
        })
    }
  }, [userId])

  useEffect(() => {
    const user_profile_api_url = BASE_URL + '/users/' + userId
    const request_data = {searches: recentSearches}

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

  }, [recentSearches])

  const makeSearchApiRequest = () => {
    let dividends_api_url = BASE_URL + '/dividends/' + term + '/' + dividendsYearsBack

    if (!recentSearches.includes(term)) {
      setRecentSearches([...recentSearches, term])
    }

    axios.get(dividends_api_url, {})
      .then(response => {
        // console.log(response)
        setLoading(false);
        setDividendsData(response.data);
      })
      .catch((error) => {
        console.log(error.message);
        setLoading(false);
        setErrorMessage(error.message);
      })
  }

  const runSearch = () => {
    console.log("running search: ", term);
    setErrorMessage('');

    if (term) {

      setLoading(true);

      if (!dividendsYearsBack) {
        setDividendsYearsBack('3', () => {
          makeSearchApiRequest()
        });
      } else {
        makeSearchApiRequest()
      }
    }
  }

  const recentSearchOnClick = (term) => {
    setTerm(term);
    setDebouncedTerm(term);
  }

  const removeRecentSearchOnClick = (term) => {
    const searchesWithoutThisOne = recentSearches.filter(search => search !== term)
    setRecentSearches(searchesWithoutThisOne);
  }

  const dividendsYearsBackOnChange = (text) => {
    setDividendsYearsBack(text);
  }

  const renderMainContent = () => {
    if (!debouncedTerm) {
      return (
        <div className="ui active">
          <div className="ui text">Search for info about a stock</div>
        </div>
      )
    }
    if (loading === true) {
      return (
        <div className="ui active dimmer">
          <div className="ui big text loader">Loading</div>
        </div>
      )
    }
    if (errorMessage) {
      return (
        <div className="ui active">
          <div className="ui text">{errorMessage}</div>
        </div>
      )
    } else {
      return (
        <DividendResultsDisplay
          data={dividendsData}
          dividends_years_back={dividendsYearsBack}
          dividendsYearsBackOnChange={dividendsYearsBackOnChange}
          showMainInfo={showMainInfo}
          showYieldChange={showYieldChange}
          showAllDividends={showAllDividends}/>
      )
    }
  }

  // https://stackoverflow.com/questions/38619981/how-can-i-prevent-event-bubbling-in-nested-react-components-on-click
  const renderRecentSearches = () => {
    return recentSearches.map((term) => {
      return (
        <div key={term}>
          <button
            onClick={() => recentSearchOnClick(term)}
            style={{marginRight: '10px'}}
            >
              <div>{term} </div>
          </button>
          <button
            onClick={(event) => {event.stopPropagation(); removeRecentSearchOnClick(term)}}>
              X
          </button>
          <br/><br/>
        </div>
      )
    })
  }

  const renderSettingsView = (data) => {
    if (settingsViewVisible) {
      return (
        <SettingsView data={data} />
      )
    } else {
      return null;
    }
  }

  const toggleSettingsView = () => {
    setSettingsViewVisible(!settingsViewVisible);
  }

  const toggleDisplay = (e, setter) => {
    setter(e.target.checked)
  }

  const SETTINGS_DATA = [
    {
      label: 'Main info',
      id: 'main_info',
      toggler: toggleDisplay,
      setter: setShowMainInfo
    },
    {
      label: 'Yield change',
      id: 'yield_change',
      toggler: toggleDisplay,
      setter: setShowYieldChange
    },
    {
      label: 'Dividends list',
      id: 'all_dividends',
      toggler: toggleDisplay,
      setter: setShowAllDividends
    },
  ]

  console.log("showMainInfo: ", showMainInfo);
  console.log("showYieldChange: ", showYieldChange);
  console.log("showAllDividends: ", showAllDividends);

  return (
    <div className="ui container" style={{marginTop: '10px'}}>
      <SearchBar term={term} onTermUpdate={onTermUpdate} />
      {renderRecentSearches()}
      <br/><br/>
      <button onClick={toggleSettingsView}>Display settings</button>
      {renderSettingsView(SETTINGS_DATA)}
      <div className="ui segment">
        {renderMainContent()}
      </div>
    </div>
  )
}


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

export default connect(
  mapStateToProps
)(SearchPage);

// export default SearchPage;

the settingsView component:

import React from 'react';

import SettingsCheckbox from './SettingsCheckbox';



const SettingsView = ({data}) => {

  const checkboxes = data.map((checkbox_info) => {
      return (
        <div key={checkbox_info.id}>
          <SettingsCheckbox
            id={checkbox_info.id}
            label={checkbox_info.label}
            toggler={checkbox_info.toggler}
            setter={checkbox_info.setter}/>
          <br/>
        </div>
      )
    });

  return (
    <div className="ui segment">
      {checkboxes}
    </div>
  );
}


export default SettingsView;

SettingsCheckbox.js:

import React, {useState} from 'react';


const SettingsCheckbox = ({id, label, toggler, setter}) => {

  const [checked, setChecked] = useState(true)
  return (
    <div style={{width: '200px'}}>
      <input
        type="checkbox"
        checked={checked}
        id={id}
        name={id}
        value={id}
        onChange={(e) => {
          setChecked(!checked);
          toggler(e, setter);
        }} /> &nbsp;
      <label htmlFor="main_info">{label}</label><br/>
    </div>
  );
}


export default SettingsCheckbox;