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

Question

我正在尝试将React-widgets NumberPicker包装在一个功能组件中，该组件在onChange触发时会更新状态。

当我单击选择器的向上或向下箭头时，它开始闪烁，就好像它是在参考/渲染循环中一样。我将代码简化为以下代码，这些代码为我复制了错误。

我正在使用React 16.13.1，react-widgets 4.5.0，react-widgets-simple-number 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>
  );
}