arrays - React List and Keys - 如何使最后添加的项目出现在顶部？

Question

我正在研究 React 列表和键。但我想让最后添加的项目出现在顶部。有谁能帮助我吗？

例子。

import { useState } from "react";
function ListsKeys() {
  const [names, setNames] = useState([]);
  function handleInput() {
    let input = document.getElementById("input");
    setNames((prevState) => {
      let state = [...prevState];
      state.push(input.value);
      return state;
    });
  }
  return (
    <div className="container">
      <h2> 03// Lists& Keys </h2>
      <hr />
      <h4>- Lists & Keys</h4>
      <input id="input" />
      <button className="btn" onClick={handleInput}>
        {" "}
        Submit Name{" "}
      </button>

      {names.map((name) => (
        <div className=""> {name}</div>
      ))}
    </div>
  );
}
export default ListsKeys;

标签： arraysreactjs

Answer 1

您可以Array.prototype.reverse()在打印列表之前使用该函数，并使用Array.prototype.unshift()将新项目作为参数传递来添加项目。

const arr = [1,2,3,4,5].reverse(); //[5,4,3,2,1]