通过使用按钮设置状态来循环遍历数组中的对象 React

Posted 2023-02-22

【中文标题】通过使用按钮设置状态来循环遍历数组中的对象 React

【英文标题】：Cycle through objects in an array by setting state with a button React

【发布时间】：2020-04-14 23:38:51

【问题描述】：

所以我有一些数据想要循环浏览：

const data = 
  names: [
    
      name: "Jordan"
      // additional data
    ,
    
      name: "Holly"
      // additional data
    ,
    
      name: "Sean"
      // additional data
    
  ]
;

使用useState钩子，我从索引0开始我的数据：

const [index, setIndex] = useState(data.names[0]);

如何使用状态循环遍历数组中的对象？我创建了一个调用handleClick的按钮，如何通过数组+1？

function App() 
  const [index, setIndex] = useState(data.names[0]);

  function handleClick() 
    setIndex(); // Help!
  

  return (
    <div className="App">
      <h1>index.name</h1>
      <button onClick=handleClick>Change name</button>
    </div>
  );

CodeSandBox

【问题讨论】：

const [index, setIndex] = useState(0); function handleClick() setIndex(i => (i + 1) % data.names.length); 然后使用data.names[index] 而不是index.name

试过了，好像没用？

它应该可以工作。

【参考方案1】：

不要将数组中的元素设置为状态。而是使用当前的index。在处理程序中，在每次单击时将 1 添加到 index，并圈出名称从长度中获取余数。只要index 等于数组的长度，余数就是0。

注意：向后循环需要 mod() 函数，因为余数运算符 (%) 不适用于负数。取自answer。

const  useState, useCallback  = React;

const mod = (n, m) => ((n % m) + m) % m;

function App( names ) 
  const [index, setIndex] = useState(0);

  const forwards = useCallback(() => 
    setIndex(state => mod(state + 1, names.length))
  , [setIndex, names]);
  
  const backwards = useCallback(() => 
    setIndex(state => mod(state - 1, names.length))
  , [setIndex, names]);

  return (
    <div className="App">
      <h1>names[index].name</h1>
      <button onClick=backwards>Backwards</button>
      <button onClick=forwards>Forwards</button>
    </div>
  );


const data = "names":["name":"Jordan","name":"Holly","name":"Sean"];

const rootElement = document.getElementById("root");
ReactDOM.render(<App ...data />, rootElement);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

【讨论】：

太好了！尤其是循环 - 如果我添加了第二个按钮来向后循环，我该怎么做？

理想情况下，您会创建另一个函数，并使用 -1。但是，JS % 运算符在负数方面表现不佳。我添加了一个 mod() 函数，取自 answer，它也从负数中获取余数。