在 ReactJS 中使用 select 对对象数组进行排序和渲染

Question

我需要你的帮助。我有一个带有代码的 js 文件，其中我有一个组件 - Home。在这个组件中，我试图从数组 users 中获取对象，并使用 select 标签和选项按升序和降序对它们进行排序。我正在尝试这样做，但我仍然无法做到。你能帮我：如何对这个数组进行排序以及如何根据顺序在页面中呈现这个对象？非常感谢

import React, {useState} from "react";

export let Home = () => {

const users = [
    {id: 1, name: "One"},
    {id: 2, name: "Two"},
    {id: 3, name: "Three"}
];

const [arrayToTop] = useState(users);
const [arrayToBottom] = useState(users);

 arrayToTop.sort((a,b) => {
        return a.id - b.id;
 })

 arrayToBottom.sort((a,b) => {
        return b.id - a.id;
 })

return (<div>
    <select>
        <option value={arrayToTop}>To top</option>
        <option value={arrayToBottom}>To bottom</option>
    </select>
        </div>)
}

Answer 1

要让 React 知道状态已更新，仅排序是不够的，您必须使用 setState()，但整体代码排序不明确，并显示在选项中？我相信这就是你想要的。

 const [order,setOrder] = useState('asc');
 const [arraySorted,setarraySorted] = useState(users);
 const handler = (e)=>{
     setOrder(e.target.value);
     const sortedarray = arraySorted.sort((a,b) => {
     return order === 'asc'?  (a.id - b.id): (b.id - a.id);
     })
    setarraySorted([...sortedarray])}

您必须为

创建一个处理程序

<select onChange={handler}  value={order} >
    <option value='asc'>To top</option>
    <option value='dsc'>To bottom</option>
  </select>

所以只有在需要时才重新渲染，并在 div .list 中显示排序后的数组，table 格式化你真正想要的格式

Answer 2

David 指出了很多问题。您需要使用 state 来管理用户 & update state 每当 select 中的排序方向发生变化时。这很简单。工作样本 -

const {useState} = React;

function App() {
  const [users, setUsers] = useState([
    { id: 1, name: "One" },
    { id: 2, name: "Two" },
    { id: 3, name: "Three" }
  ]);
  function onSelectionChange(e) {
    const sortDirection = e.target.value;
    const copyArray = [...users]; // create a new array & not mutate state

    copyArray.sort((a, b) => {
      return sortDirection === "0" ? a.id - b.id : b.id - a.id;
    });
    setUsers(copyArray); //re-render
  }

  return (
    <div className="App">
      <select defaultValue={0} onChange={onSelectionChange}>
        <option value={0}>Ascending</option>
        <option value={1}>Descending</option>
      </select>
      {users.map((user) => (
        <div key={user.id}>
          {user.id} - {user.name}
        </div>
      ))}
    </div>
  );
}

ReactDOM.render(
      <App/>,
      document.getElementById("react")
    );

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

在 ReactJS 中使用 select 对对象数组进行排序和渲染

Sort & render an array of objects using a select in ReactJS

sorting

reactjs

conditional-rendering