更新状态数组，同时避免在React中重新渲染

Question

我正在用反应原生构建一个项目。我有一个动态的玩家列表，我希望用户能够编辑。

const [players, setPlayers] = useState(['']);

function addPlayer() {
  setPlayers([...players, '']);
}

...

<List>
  { players.map(player => (
    <MyInput ...>
  )}
</List>

我想实现的是：

1. 用户输入名称
2. 用户按enter键
3. 我们称之为addPlayer，它添加一个播放器
4. 新的输入出现并得到关注（通过其他功能）

我得到的是:

< li >用户输入姓名 < li >用户按enter键 < li >我们调用addPlayer来添加播放器 < li >键盘开始关闭一会儿，然后在新输入出现时重新打开。

我已经在输入中将blurOnSubmit设置为false。在我看来，所发生的是列表被重新呈现，导致键盘自行消失。然后，当setPlayers完成执行时(它是异步的)，focus函数被调用

useEffect(() => {
  if (lastRef.current) {
    lastRef.current.focus();
  }
}, [players]);

阻止列表重新呈现以使键盘可以始终保持打开状态的最佳方法是什么？谢谢！

Answer 1

最后，我作弊了，我添加了一个输入，它就在列表的外面。我可以控制它是否显示，它的内容，以及它与其他状态变量的颜色。这样，当一个播放器被添加时，列表会重新呈现，但不会影响我的输入，我的键盘也不会移动。从用户的视点来看，它看起来和以前完全一样，就好像他直接在列表中编辑项目一样。