如果不满足条件，如何避免返回未定义答案

【问题标题】：How to avoid returning undefined if condition is not met如果不满足条件，如何避免返回未定义
【发布时间】：2021-11-21 10:01:32
【问题描述】：

我正在构建一个反应应用程序，并且我有一个对象（项目）数组，我想循环并根据索引显示各种对象。我使用 useState 和用户单击的按钮设置索引。

    const [index, setIndex] = useState(0);
    const itemsLength = items.length;

    const nextBtn = () => {
    if(index <= itemsLength) {
        setIndex(index + 1);
    } else {
        setIndex(0)
    }
   }

当我 console.log 索引它从 0 开始并达到 3 就好了，但是在达到应该将索引设置为 0 的 itemsLength 之后，它返回未定义，我必须在它返回之前单击按钮 3 次为 0。

我怎样才能让它回到 0 而不返回 undefined。

我是 javascript 新手，并且已经使用了几个小时。请帮忙。

【问题讨论】：

if (index >= length) set(0); else set(index + 1);
请记住，在“array”中，“index”从0开始，而“length”从1开始，当索引到达数组的最后一个元素时，长度实际上是index + 1。

标签： javascript arrays reactjs

【解决方案1】：

这是因为数组索引为零，并且您从零开始计数这意味着十个元素是从 0 到 9 而不是 10，因此请小心使用 <= 并检查 < 是否适合您。

看下面的例子，我的循环很好

const { useState } = React;

function Example() {

  const [index, setIndex] = useState(0);
  const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 19];

  const nextBtn = () => {
    setIndex((prev) => {
      if (prev < items.length) {
        return prev + 1;
      } else {
        return 0;
      }
    });
  };

  return (
    <div className="App">
      <button onClick={nextBtn}>
        next {index}
      </button>
    </div>
  );

}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

【讨论】：

您的项目有 10 个长度，但索引状态从 0 到 10，这意味着索引有 11 个数字。所以 items[index] 在索引为 10 的地方是未定义的。我不明白你为什么给我投反对票！！！
仅供参考snippets support React code.
请在您的代码上运行console.log(items[index])，您会看到索引何时为10 items[index] 未定义。
由于某种原因，这一直有效到最后一个，然后它返回 undefined。
然后我认为，正如@Mohsen007 所说，它是索引的问题，我认为像他那样在长度上加 1 是正确的

【解决方案2】：

你的函数必须是这样的：

const nextBtn = () => {
    if (index < itemsLength - 1) {
      setIndex(index + 1);
    } else {
      setIndex(0);
    }
  };

【讨论】：

不是我对您的评论投了反对票，但我正在检查他为什么评论为负面，我认为只需添加 < 您已经将数组长度计算为负 1，
如果你想说if (index < itemsLength - 1)，你应该输入if (index <= itemsLength - 1)
这确实对我有用，谢谢