Arrays React-on OnClick显示数组中的下一个元素

我有一个名为

的变量。受让人可以是我在下面的数组中列出的三个名称之一。启动时，我调用一个API，返回当前的受让人（如果存在受让人）。我将Assignment变量设置为从API收到的名称

我有一个
div
元素，显示受让人的名称，当用户单击此元素时，我希望受让人根据列表顺序进行更改。我如何解决这个问题

const users = ["Bill", "Steve", "Sara"];
const [assignee, setAssignee] = useState<string>();

假设我从Api中获得
Sara
，现在，当我单击要更改为
Bill
的元素时，我要更改为
Steve
，然后更改为
Sara
。它应该返回到数组的开头并重新迭代。这是解决这个问题的最佳方法还是有更好的方法来解决这个问题

const users = ["Bill", "Steve", "Sara"];
const [assignee, setAssignee] = useState<string>();


{
handlessigneeonclick（）；
}}
>
{受让人}

我会稍微改变它的结构，并将索引存储在state中

它检查当前索引是否是最后一个索引，如果是，则返回到开头。否则，它只会增加一个

然后使用索引打印当前选定的用户


const{useState，useffect}=React；
const users=[“比尔”、“史蒂夫”、“萨拉”]；
常量示例=（）=>{
const[selected，setSelected]=useState（0）；
const handlessigneeonclick=（）=>{
已选择设置（上一个=>{
if（prev==users.length-1）{
返回0；
}否则{
返回prev+1；
}
});
};
返回(
{用户[选定]}

)
}
ReactDOM.render（，document.getElementById（'root'））
我会稍微改变它的结构，并将索引存储在state中

它检查当前索引是否是最后一个索引，如果是，则返回到开头。否则，它只会增加一个

然后使用索引打印当前选定的用户


const{useState，useffect}=React；
const users=[“比尔”、“史蒂夫”、“萨拉”]；
常量示例=（）=>{
const[selected，setSelected]=useState（0）；
const handlessigneeonclick=（）=>{
已选择设置（上一个=>{
if（prev==users.length-1）{
返回0；
}否则{
返回prev+1；
}
});
};
返回(
{用户[选定]}

)
}
ReactDOM.render（，document.getElementById（'root'））
您可以更改
assignment
状态变量，以保留数组中相应人员的索引。像这样：

const [assignee, setAssignee] = useState<number>(-1);

这将索引设置为索引+1除以3的余数。如果阵列增长，您还可以使用
users.length
来获得更具动态性的内容

然后在报税表中，显示如下名称：

<div
  className="assignee"
  onClick={handleAssigneeOnClick}
>
  <p>{users[assignee]}</p>
</div>

div{
背景：红色；
高度：20px；
}
您可以更改
assignment
状态变量，以保留数组中相应人员的索引。像这样：

const [assignee, setAssignee] = useState<number>(-1);

这将索引设置为索引+1除以3的余数。如果阵列增长，您还可以使用
users.length
来获得更具动态性的内容

然后在报税表中，显示如下名称：

<div
  className="assignee"
  onClick={handleAssigneeOnClick}
>
  <p>{users[assignee]}</p>
</div>

div{
背景：红色；
高度：20px；
}