React UseEffect-从下拉列表中选择项目时如何清空数组

这是我目前的情况。

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]);

This lets me create an array on my first loading page, when home.matchsPlayed, home.totalCal and selectedHomeName are not undefined.

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

My problem is then i can select an other item from a dropdown and i want to empty this data array and replacing with the new item selected states home.matchsPlayed, home.totalCal, selectedHomeName

So my question is how can i empty this array and then replacing with the new states in the same useEffect? or do i have to create a separate useEffect?

Theoretically i would need only to put something like that setData(... data, []) right after i have selected a new item from the dropdown before this part runs again.

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

这是我从下拉菜单中选择新项目时的方法

  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, selectedHomeName]);