时间戳

首页 > 解决方案 > 太多的重新渲染 React Native

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}

我做错了什么？

标签： react-nativedraggable

解决方案

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

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

或者

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

以便它仅在您实际释放密钥时添加播放器。

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

推荐阅读