Reactjs 反应JSON数组顺序

我有一个从中读取数据的json文件。这是一个项目数组。我想单击数组中的第一项并将其移动到最后一个索引。例如，var

动物=[“牛”、“狗”、“猫”]

。如果我点击cow，我希望它现在是最后一项，这样新的数组将是

动物=[“狗”、“猫”、“cow”]

。我需要将此作为onClick事件来执行，但我无法理解。我将感谢任何人的帮助

---

我想可能是一个

forEach

，但不确定如何为各种点击构建它。

这里有一种方法可以做到：

class.Component{
状态={
动物：[
{name:“cow”}，
{name:“dog”}，
{名称：“猫”}
]//初始列表
};
onAnimalClick=e=>{
const{animals}=this.state；//当前列表
const index=e.target.dataset.index；//单击项的索引
const[clicked]=animals.splice（index，1）；//提取项并将其从数组中删除
这是我的国家({
动物：[…动物，单击]//将单击的项目添加到末尾
});
};
render（）{
const{animals}=此状态；
返回动物。地图（（a，i）=>(
{a.name}
));
}
}
ReactDOM.render（，document.getElementById（'app'））
以下是带有React钩子的代码：

const App = () => {
  const [animals, setAnimals] = useState(['cow', 'dog', 'cat']);

  const sortAnimals = () => {
    let myAnimals = [...animals];
    myAnimals.push(myAnimals.shift());
    setAnimals(myAnimals);
  }

  return (
    <div>
      {
        animals.map(animal => <button onClick={sortAnimals}>{animal}</button>)
      }
    </div>
  );
};

const-App=（）=>{
const[animals，setAnimals]=useState（['cow'，'dog'，'cat']）；
const sortAnimals=（）=>{
让我的动物=[…动物]；
myAnimals.push（myAnimals.shift（））；
刚毛动物（myAnimals）；
}
返回(
{
animals.map（animal=>{animal}）
}
);
};
这并没有说明点击了哪只动物。是的，但他提到只点击了第一个项目，并将其移动到最后一个项目。我想是她。对不起，我没有检查她的名字。你说得对@JuniusL。谢谢你@ray hatfield这太棒了。我需要澄清这是一个对象数组。我的错误是写东西。有没有办法对对象执行此操作？我有引导卡的形式的信息，所以当一个被标记为已读时，我希望它能进入底部，就像上面一样。希望这能澄清问题，非常感谢您的帮助！！过程完全相同。该项由其在列表中的索引标识。我已经将代码段更新为使用对象而不是字符串。非常感谢。在我对代码进行重构之后，这就起到了作用。唯一的问题是，我现在得到了重复，比如如果我在数组中有2个对象，4显示在页面上，或者如果我有3，6显示在页面上。你明白我的意思了。你知道是什么导致了重复吗？再次郑重感谢您的洞察力。我非常感激！在css组件中有一个嵌套的
this.state.css
迭代：一个外部的迭代使用
onClick
呈现
div
，然后再次在
div
内部呈现
上下文
。我之前考虑过这一点，我不认为将项移动到数组的末尾是正确的方法。最好将该项标记为已读（作为项本身的属性），然后对数组进行相应的排序。读取/未读取状态不应由执行渲染的对象在内部管理。