使用onChange在功能组件内设置状态时，NumberPicker循环

Question

我正试图将react窗口小部件NumberPicker封装在一个功能组件中，该组件在onChange触发时更新状态。

当我点击选取器的向上或向下箭头时，它开始闪烁，就像在引用/重新发布循环中一样。我已经将代码简化为以下代码，为我复制错误。

我使用的是React16.13.1，React窗口小部件4.5.0，React小部件简单编号4.1.24

import React, { useState } from 'react';
import NumberPicker from 'react-widgets/lib/NumberPicker';
import simpleNumberLocalizer from 'react-widgets-simple-number';
simpleNumberLocalizer();
export default function TestPicker(props) {
const [myVar, setMyVar] = useState(5);
function Picker() {
return (
<NumberPicker value={myVar} onChange={setMyVar} />
);
}
return (
<div>
<Picker />
</div>
);
}

如果我将组件移出功能，它会正常工作：

import React, { useState } from 'react';
import NumberPicker from 'react-widgets/lib/NumberPicker';
import simpleNumberLocalizer from 'react-widgets-simple-number';
simpleNumberLocalizer();
export default function TestPicker(props) {
const [myVar, setMyVar] = useState(5);
return (
<div>
<NumberPicker value={myVar} onChange={setMyVar} />
</div>
);
}

有什么想法可以解释为什么这种行为没有如预期的那样？

Answer 1

这是因为，在第一个代码段中，您定义的状态是针对父组件的，而不是针对子组件的。而在第二种情况下，状态属于组件本身。

如果您希望第一个代码段工作，请将状态传递给子代码段。

import React, { useState } from 'react';
import NumberPicker from 'react-widgets/lib/NumberPicker';
import simpleNumberLocalizer from 'react-widgets-simple-number';
simpleNumberLocalizer();
export default function TestPicker(props) {
const [myVar, setMyVar] = useState(5);
function Picker({ value, setMyVar }) {
return (
<NumberPicker value={value} onChange={setMyVar} />
);
}
return (
<div>
<Picker value={myVar} setMyVar={setMyVar} />
</div>
);
}