Цикл NumberPicker при использовании onChange для установки состояния внутри функционального компонента - PullRequest
Новая
       49

Цикл NumberPicker при использовании onChange для установки состояния внутри функционального компонента

0 голосов
/ 09 апреля 2020

Я пытаюсь обернуть NumberPicker реагирующих виджетов в функциональный компонент, который обновляет состояние при срабатывании onChange.

Когда я нажимаю на стрелку вверх или вниз в средстве выбора, он начинает мерцать как если он в реферре / рендеринге l oop. Я уменьшил код до следующего, который повторяет ошибку для меня.

Я использую React 16.13.1, реагировать-виджеты 4.5.0, реагировать-виджеты-просто-число 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>
  );
}

Есть идеи, почему это не так, как ожидалось?

1 Ответ

0 голосов
/ 09 апреля 2020

Это связано с тем, что в первом фрагменте определенное вами состояние относится к родительскому компоненту, а не к дочернему. Тогда как во втором состояние принадлежит самому компоненту.

Если вы хотите, чтобы первый фрагмент работал, передайте состояние дочернему элементу. 

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>
  );
}
...