太多重新渲染 React Native

如何解决太多重新渲染 React Native

您好，我尝试通过按下“可拖动项目”来复制视图。我让它在“组件功能”上工作。但是当我使用 Hooks 时它不起作用，它给了我一个错误：

“重新渲染太多。React 限制渲染次数以防止无限循环。”

这是我尝试添加的视图：

  const addNewPLayer = () => {
    return (
      <Draggable
        x={240}
        y={300}
        renderSize={20}
        renderColor="red"
        renderText="u"
      />
    );
  };

这是我的添加函数：

 const [newplayer,setNewPlayer] = useState([]);

  const addplayer = () => {
    setNewPlayer([...newplayer,<addNewPLayer />]);
  };

这是我的“按钮”，onShortPressRelease 的工作方式与 onPress 类似。

   <Draggable
      key={key}
      x={"80%"}
      y={50}
      renderColor="blue"
      renderSize={50}
      isCircle
      renderText={item.name}
      onShortPressRelease={addplayer()}
    />

为了显示这个视图，刚刚添加了我的状态

{newplayer}

我做错了什么？

解决方法

我无法用您发送的内容测试所有内容，但让我印象深刻的是 <Draggable /> 组件。在它的 props onShortPressRelease 中，你立即调用了 addPlayer 函数，我相信你想要的是

<Draggable
  ...
  onShortPressRelease={addPlayer}
/>

或

<Draggable
  ...
  onShortPressRelease={() => addPlayer()}

这样它只会在您真正释放按键时添加一个播放器。

这很重要，因为如果 Draggable 与其他所有内容一起呈现，它会调用 setPlayer 函数，触发新的呈现，重新呈现 Draggable，这将再次重新呈现...从而导致无限渲染循环。