太多的React原生重渲染

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 />组件。在它的道具onShortPressRelease中，你立即调用addPlayer函数，我相信你想要的是

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

或

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

这样，只有当你真正松开钥匙时，它才会添加一个玩家。

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