太多重新渲染 React native

Question

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

我哪里做错了？

Answer 1

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

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

或

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

这样它只会在您实际释放按键时添加播放器。

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

太多重新渲染 React native

Too many re-renders React native

draggable

react-native