问题:文本框上的 onBlur 函数会重新呈现整个播放列表,从而阻止了切换到下一个文本框的能力

function handleBlur(event) {
  if (event.target.value !== props.value) {
    // a hook function that ends up rerendering the whole playlist
  }
}

我正在尝试使用 React 钩子,并且我有一个播放列表,其中包含一堆具有输入文本框的组件。不幸的是,尽管有记忆,但修改列表中的项目似乎会呈现整个播放列表组件,所以我试图将保存播放列表功能移动到 onBlur 而不是 onChange。但是当我在一个文本框上并且我使用标签时,一旦发生重新渲染,我就会失去我所在的文本框的标签焦点。有什么办法可以防止这种情况吗?当我只想修改列表中的一个对象时,关于如何防止重新渲染整个播放列表的任何提示也会很好

playerList.map((player, index) => (
  <DraftPlayer
     arrayPosition={index}
     key={index + (Math.random()).toString()}
     modifyPlayer={modifyPlayer}  //hook function
     player={player}
   />
 ))

const [playerList, setPlayerList] = React.useState(
    initializePlayerListArray([ { firstName: "", lastName: "" },{ firstName: "", lastName: "" },{ firstName: "", lastName: "" },{ firstName: "", lastName: "" },{ firstName: "", lastName: "" },etc ])
  );

解答

您遇到的问题是因为您在每个渲染周期都设置了一个随机键。 React 使用 key 来渲染性能,但是当这个 key 被随机化时,它会告诉 react 一个新项目正在被渲染,或者它应该被渲染。反过来,输入本质上是卸载然后重新安装在 DOM 中。这就是为什么你最终会失去焦点。相反,您应该尽量使密钥保持不变(与正在呈现的项目相关)。

我不知道您正在使用的播放器模型,但在同一页面上我将为播放器编写一个打字稿界面:)

interface Player {
  id: number
  firstname: string
  lastname: string
  /* ... etc */
}

然后我会以这种方式创建您的项目

playerList.map((player, index) => (
  <DraftPlayer
     arrayPosition={index}
     key={player.id}
     modifyPlayer={modifyPlayer}  //hook function
     player={player}
   />
))