在React JS中按下按钮后，如何使数组元素出现在一个上？

Question

import ReactDOM from 'react-dom';
import React, {useState} from 'react';
function App() {
  const [arr, setArr] = useState(["bmw", "mercedes", "audi"]);
  let result;
  let i = 0;
  function Add() {
  ????  
    
  }
  return(
    <div>
      <button onClick={Add}>Add item</button>
      <div>{arr.map(x => <p>{x}</p>)}</div>
    </div>
  )
}
  
  
ReactDOM.render(<App />, document.getElementById("root"));

上面的该代码仅一次打印所有数组元素。单击按钮后，如何使'em逐一显示（一键显示-ARR [0]，第二键单击-ARR [1]等等？

Answer 1

添加一个新状态以更新索引，并具有该功能的按钮调用。然后调用另一个将数组元素切割到索引的功能，MAP在该数组上并返回一些JSX。

const { useState } = React;

function Example() {

 const [arr, setArr] = useState(['bmw', 'mercedes', 'audi']);

 // Add a new state for the index
 const [index, setIndex] = useState(0);

  // Click the button - update the index
  function addElement(arr) {
    setIndex(index + 1);
  }

  // Return some JSX by slicing the array up
  // to the index, and then `map` over that array
  // and return some divs
  function getElements(arr, index) {
    return arr.slice(0, index).map(el => {
      return <div>{el}</div>;
    });
  }
  
  return (
    <div>
      <button onClick={addElement}>Add item</button>
      {getElements(arr, index)}
    </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>

Answer 2

您可以使用表示index和slice方法的状态：

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

return (
<button onClick={() => setIndex(prevIndex => prevIndex + 1)}>Click Me</button>
{array.slice(0, index).map(x => <p>{x} </p>)}
);