如何使用 React.Js 在不打乱序列的情况下将特定的 object 推到对象数组的顶部？

Question

我在代码中遇到了一个小问题并寻求您的帮助。

问题描述：（我有一个对象数组（主要只有4个对象），每个object都有唯一的Id作为它的标识符主键。我有4个按钮，每个按钮的职责是改变里面对象的布局以特定顺序排列给定的数组。如何实现这一点？我正在使用 react.Js)

我拥有的资产：

一个包含 4 个对象的数组

const MyArray = [
 { id : 1, name : 'Elon'},
 { id : 2, name : 'Mark'},
 { id : 3, name : 'Bill'},
 { id : 4, name : 'Jeff'},
];

现在我将它映射到一个组件上

export default function MyComponent () {
// setting value 
const [ name, setName ] = useState(''); // initially don't know who is at top 
return (
<List>
 {PersonAtTop(name)}
</List> // as simple as a list , say for now!

// 4 buttons
<Button onClick = {() => setName('billAtTop')} >{'Keep Bill @ top'}</Button>

<Button onClick = {() => setName('markAtTop')} >{'Keep Mark @ top'}</Button>

<Button onClick = {() => setName('jeffAtTop')} >{'Keep Jeff @ top'}</Button>

<Button onClick = {() => setName('elonAtTop')} >{'Keep Elon @ top'}</Button>
)}

// there could be a function that receive ('billAtTop', 'markAtTop', 'elonAtTop', 'jeffAtTop', as arguments (all of type string))

function PersonAtTop( who : string ) {
switch(who) {
 case 'billAtTop' : return MyArray....map((array) => array.name ); // what to do here so that I would get 'bill' at top of the array and rest all the other remain unchanged

case 'markAtTop' : return MyArray....map((array) => array.name); // what to do here so that I would get 'mark' at top of the array and rest all the other remain unchanged

case 'jeffAtTop' : return MyArray....map((array) => array.name); // what to do here so that I would get 'jeff' at top of the array and rest all the other remain unchanged

case 'elonAtTop' : return MyArray....map((array) => array.name); // what to do here so that I would get 'elon' at top of the array and rest all the other remain unchanged;

default : return MyArray.map((array) => array.name); // default sorting here
}}

我需要你帮助建立这个逻辑，我希望你一定对我的情况有一个很好的了解。 再一次，我大致给出 output 如下 -

Orignally array is 

 1. Elon
 2. Mark
 3. Bill
 4. Jeff

case 1 : When Elon a@ top triggered , render the exact above order, no changes
case 2 : When Mark @ top is triggered, render - 
           1. Mark
           2. Elon
           3. Bill
           4. Jeff
case 3 : When Bill @ top is triggered, render - 
          1. Bill
          2. Elon
          3. Mark
          4. Jeff
case 4 : When Jeff @ top is triggered, render - 
         1. Jeff
         2. Elon
         3. Mark
         4. Bill

在这里您可以看到，有一种队列类型的结构，无论顶部出现什么，其余顺序对于下面的所有元素都保持不变。 同样，根据单击哪个按钮以及 function "PersonAtTop()"收到的参数，只有顶部元素占用 position。

我认为与.reduce() 、 .sort()和.map()有关，如果我没记错的话，也许还有.push() 。

请帮我解决这个逻辑，我被困住了。 欢迎所有建议。 谢谢你们。

Answer 1

检查下面的代码。希望这是你所期望的

import React, { Fragment, useState } from "react";

export default function App() {
  const [myArray, setMyArray] = useState([
    { id: 1, name: "Elon" },
    { id: 2, name: "Mark" },
    { id: 3, name: "Bill" },
    { id: 4, name: "Jeff" }
  ]);

  const handleOnClick = (name) => {
    const selectedPerson = myArray.find((data) => data.name === name);
    const filteredArray = myArray.filter((data) => data.name !== name);
    setMyArray([selectedPerson, ...filteredArray]);
  };

  return (
    <div className="App">
      {myArray.map(({ name }) => (
        <Fragment key={name}>
          <button
            onClick={(e) => handleOnClick(name)}
          >{`Keep ${name} @ top`}</button>
          <br />
        </Fragment>
      ))}
    </div>
  );
}

链接： https://codesandbox.io/s/stackhelp-arraysort-u1b3dx?file=/src/App.js