Question

试图遍历整个月。每次单击下一个按钮，它将转到下个月，反之亦然。我对如何为此使用forEach语句感到困惑。也许这不是最佳选择，我应该使用map函数。

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const months = ["January", "February", "March", "April"];

  const [headingText, setHeadingText] = useState(months[0]);

  
months.forEach(function(month){
  function handleClick(){
    setHeadingText(month);
  }


});
  


  return (
    <div className="App">
      <h1>The month is {headingText}</h1>
      <button>Previous Month</button>
      <button onClick={handleClick}>Next Month</button>
    </div>
  );
}

https://codesandbox.io/s/gifted-blackburn-opqdv?file=/src/App.js:0-514

Answer 1

在沙盒中播放一分钟。使用钩子，我在状态下创建了变量，可用于索引数组。

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const months = ["January", "February", "March", "April"];

  //lets declare a new state variable we'll call index that 
  //we can update in handleClick and use to access months
  const [i, incrementIndex] = useState(0)
  const [headingText, setHeadingText] = useState(`${months[i]}`);

  function handleClick() {
    setHeadingText(`${months[i + 1]}`);
    incrementIndex(i + 1)
  }

  return (
    <div className="App">
      <h1>The month is {headingText}</h1>
      <button>Previous Month</button>
      <button onClick={handleClick}>Next Month</button>
    </div>
  );
}

也许是上个月的另一个条件语句，该语句使状态中的索引变量递减。

Answer 2

我想你都不需要。

您可以将当前月份的索引保持在const [month, setMonth] = useState(0);状态，然后在handleClick处理程序中，增加索引：

function handleClick() {
    setMonth((month + 1) % months.length);
  }

根据您的代码段，这是一个完整的示例：

import React, { useState } from "react";
import "./styles.css";

const months = ["January", "February", "March", "April"];

export default function App() {
  const [month, setMonth] = useState(0);

  function handleClick() {
    setMonth((month + 1) % months.length);
  }

  return (
    <div className="App">
      <h1>The month is {months[month]}</h1>
      <button>Previous Month</button>
      <button onClick={handleClick}>Next Month</button>
    </div>
  );
}

Answer 3

您不需要foreach，可以创建两个函数，一个继续进行，一个返回。另外，请考虑由于数组导致的索引限制

export default function App() {
  const months = ["January", "February", "March", "April"];

  const [headingText, setHeadingText] = useState("Meow");
  const [index, setIndex] = useState(0);

  function handlePreviousClick() {
    if (index > 0) {
      setIndex(index - 1);
    }
    setHeadingText(months[index]);
  }

  function handleNextClick() {
    if (index < months.length - 1) {
      setIndex(index + 1);
    }
    setHeadingText(months[index]);
  }

  return (
    <div className="App">
      <h1>The month is {headingText}</h1>
      <button onClick={handlePreviousClick}>previous Month</button>
      <button onClick={handleNextClick}>Next Month</button>
    </div>
  );
}

Answer 4

为了在月份之间轻松切换，最好使用月份索引作为状态

const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
export function App() {
  const [currentMonthIndex, setCurrentMonthIndex] = useState(0)

  const handleClick = useCallback(() => {
    const nextIndex = (currentMonthIndex + 1) % MONTHS.length
    setCurrentMonthIndex(nextIndex)
  }, [setCurrentMonthIndex])

  const currentMonth = MONTHS[currentMonthIndex]

  return (
    <div className="App">
      <h1>The month is {currentMonth}</h1>
      <button>Previous Month</button>
      <button onClick={handleClick}>Next Month</button>
    </div>
  );
}

Answer 5

您的开端很好。您想要做的是将“ selectedIndex”作为您的状态-这将保存所选月份的索引。当selectedIndex位于数组的边缘时，您还将具有禁用按钮的逻辑：

export default function App() {
  const months = ["January", "February", "March", "April"];
  const [selectedIndex, setSelectedIndex] = useState(0);
  const handlePrevClick = useCallback(() => 
    setSelectedIndex((selectedIndex) => selectedIndex - 1), 
  [/* Note: no dependencies needed */])
  const handleNextClick = useCallback(() => 
    setSelectedIndex((selectedIndex) => selectedIndex + 1), 
  [/* Note: no dependencies needed */])

  return (
    <div className="App">
      <h1>The month is {months[selectedIndex]}</h1>
      <button disabled={selectedIndex === 0} onClick={handlePrevClick}>Previous Month</button>
      <button disabled={selectedIndex === months.length - 1} onClick={handleNextClick}>Next Month</button>
    </div>
  );
}

单击按钮时遍历数组

5 个答案: