太多重新渲染 React Native

时间:2021-07-22 09:43:56

标签: react-native draggable

您好,我尝试通过按下“可拖动项目”来复制视图。我让它在“组件功能”上工作。但是当我使用 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}

我做错了什么?

1 个答案:

答案 0 :(得分:0)

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

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

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

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

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