我的按钮需要双击才能增加或减少索引

Question

我有一个问题。我想通过按钮交互更新我的组件。但我必须双击这些按钮。我该如何解决这个问题？我正在添加我的浏览器控制台结果。第一次单击不会更改索引。我看到了一些关于样式的解决方案。其实我也不知道是什么原因。

这是我的代码：

function WeeklyForecast({data}) {
  const [selectedDayIndex, setSelectedDayIndex] = useState(1);
  const [selectedWeek, setSelectedWeek] = useState("current")

  
  if (!data) {
    return <div>Loading...</div>; 
  }
  var days = Object.keys(data.current);

  const prevClick = () => {
    if(selectedDayIndex > 0){
      setSelectedDayIndex(selectedDayIndex - 1);
    }

    switch (selectedDayIndex) {
      case 0:
        days = Object.keys(data.previous)
        setSelectedWeek("previous")
        break;

      case 1:
        days = Object.keys(data.current);
        setSelectedWeek("current")
        break;

      case 2:
        days = Object.keys(data.next);
        setSelectedWeek("next")
        break;
    
      default:
        break;
    }

    console.log(selectedDayIndex);
  };

  const nextClick = () => {
    if(selectedDayIndex < Object.keys(data).length - 1){
      setSelectedDayIndex(selectedDayIndex + 1);
      }
      
      switch (selectedDayIndex) {
        case 0:
          days = Object.keys(data.previous)
          setSelectedWeek("previous")
          break;
        
        case 1:
          days = Object.keys(data.current);
          setSelectedWeek("current")
          break;

        case 2:
          days = Object.keys(data.next);
          setSelectedWeek("next")
          break;

        default:
          break;
      
    }
    console.log(selectedDayIndex);
  };

  return (
    <div className='WeeklyForecast'>
      <div className="Prev-Btn">
        <button onClick={prevClick}>&lt;</button>
      </div>
      <div className="Forecast-List">
        {days.map((day, index) => (
          <div key={index}>
            <p>{day}</p>
            <p>${data[selectedWeek][day].type}</p>
            <p>${data[selectedWeek][day].degree}°</p>

          </div>
        ))}
      </div>
      <div className="Next-Btn">
        <button onClick={nextClick}>&gt;</button>
      </div>
    </div>
  );
}

export default WeeklyForecast

还有我的控制台结果双击下一步按钮（默认值为1，第一次单击不更改值）：

这是我的数据：

"weeklyWeather": {
    "previous": {
      "sunday": {
        "type": "sunny cloudy",
        "degree": "18"
      },
      "monday": {
        "type": "sunny cloudy",
        "degree": "19"
      },
      "tuesday": {
        "type": "sunny",
        "degree": "24"
      },
      "wednesday": {
        "type": "rainy",
        "degree": "15"
      },
      "thursday": {
        "type": "sunny rainy",
        "degree": "18"
      },
      "friday": {
        "type": "thunder",
        "degree": "14"
      },
      "saturday": {
        "type": "sunny",
        "degree": "16"
      }
    },
    "current": {
      "sunday": {
        "type": "thunder",
        "degree": "18"
      },
      "monday": {
        "type": "sunny cloudy",
        "degree": "24"
      },
      "tuesday": {
        "type": "sunny cloudy",
        "degree": "25"
      },
      "wednesday": {
        "type": "rainy",
        "degree": "14"
      },
      "thursday": {
        "type": "sunny rainy",
        "degree": "19"
      },
      "friday": {
        "type": "thunder",
        "degree": "13"
      },
      "saturday": {
        "type": "sunny",
        "degree": "18"
      }
    },
    "next": {
      "sunday": {
        "type": "sunny",
        "degree": "25"
      },
      "monday": {
        "type": "sunny",
        "degree": "26"
      },
      "tuesday": {
        "type": "sunny cloudy",
        "degree": "24"
      },
      "wednesday": {
        "type": "rainy",
        "degree": "21"
      },
      "thursday": {
        "type": "sunny rainy",
        "degree": "22"
      },
      "friday": {
        "type": "thunder",
        "degree": "17"
      },
      "saturday": {
        "type": "sunny",
        "degree": "18"
      }
    }
  }

Answer 1

这简化为类似的事情

const days = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];

export default function WeeklyForecast({ data }) {
  const [selectedWeekIndex, setSelectedWeekIndex] = React.useState(1);
  if (!data) return <>Loading...</>;
  const prevClick = () => setSelectedWeekIndex((i) => Math.max(i - 1, 0));
  const nextClick = () => setSelectedWeekIndex((i) => Math.min(i + 1, 2));
  const selectedWeekKey = ["previous", "current", "next"][selectedWeekIndex];
  const selectedWeekData = data[selectedWeekKey];

  return (
    <div className="WeeklyForecast">
      <div className="Prev-Btn">
        <button onClick={prevClick}>&lt;</button>
      </div>
      <div className="Forecast-List">
        {days.map((day) => (
          <div key={day}>
            <p>{day}</p>
            <p>${selectedWeekData[day].type}</p>
            <p>${selectedWeekData[day].degree}°</p>
          </div>
        ))}
      </div>
      <div className="Next-Btn">
        <button onClick={nextClick}>&gt;</button>
      </div>
    </div>
  );
}

我冒昧地重命名了

selectedDayIndex

，因为它看起来真的像是一个星期选择器（上一个/当前/下一个）。