React UseEffect - 当我 select 来自下拉列表的项目时如何清空数组

Question

这是我现在的情况。

const [data, setData] = useState([]);

  useEffect(() => {

     if (!home.matchsPlayed || !home.totalCal || !selectedHomeName) {
       return ;
     }

     setData(prev =>
       prev.concat([
         {
           day: home.matchsPlayed,
           [selectedHomeName]: home.totalCal
         }
       ])
     );
   },[home.matchsPlayed, home.totalCal, selectedHomeName]);

当 home.matchsPlayed、home.totalCal 和 selectedHomeName 不是 undefined 时，我在第一个加载页面上创建了一个数组。下面是 console.log('Data Array', data); 输出示例

  data: [
    {day:1, Barcelona:0},
    {day:2, Barcelona:1},
    {day:3, Barcelona:4}
  ],

我的问题是我只希望在第一次加载时 useEffect 运行因为这样我就可以从下拉列表中 select 另一个 item/team 并且 我想进行 2 个操作

清理现有数据数组（从之前的 useEffect 创建）
用 item/team 设置一个新的任何时候我 select 从下拉列表

示例：

let emptyData = []
setData([...data]);

又一次

 setData(prev =>
   prev.concat([
     {
       day: home.matchsPlayed,
       [selectedHomeName]: home.totalCal
     }
   ])
 );

这是我 select 从下拉列表中选择一个新项目时的方法

  const [selectedHomeOption, setSelectedHomeOption] = useState("");
  const [selectedHomeName, setSelectedHomeName] = useState("");

  const selectHomeTeamStat = evt => {
    const { value } = evt.target;
    const item = items.find(item => item.team_id == value);
    setSelectedHomeOption(value);
    setSelectedHomeName(item.name);
  };

  useEffect(() => {
    console.log('Home Team name:', selectedHomeName, 'Home Team Option:', selectedHomeOption);
    getStats(leagueId, selectedHomeOption, 'home');
  },[selectedHomeName, selectedHomeOption, home.matchsPlayed, home.totalCal]);

我不确定我是否走在实现这一目标的正确道路上，所以我需要专家的任何建议和代码解决方案。

Answer 1

我们是否可以创建另一个状态来表示我们不想稍后执行的代码是否运行？像这样：

 const [isStateDirty, setStateDirty] = useState(false);

  useEffect(() => {
    if(!isStateDirty){
       //Execute this code. This will be done only for the first time
    }
  });



//Below is any other method that gets called after which I don't want the code in useEffect to run.

const myAnyOtherMethod = () =>{
    setStateDirty(true); //this will set the state to true making sure the code in the `useEffects` doesn't run now.
}

React UseEffect - 当我 select 来自下拉列表的项目时如何清空数组

React UseEffect - How to empty an array when i select an Item from dropown

javascript

arrays

reactjs

react-hooks

use-effect