Блог

https://codesandbox.io/s/charming-ives-3jnnn

Согласно ссылкам codesandbox, у меня есть гистограмма, которая подсчитывает треки за месяц с 4 разных датчиков. Я следовал этому руководству: https://github.com/muratkemaldar/using-react-hooks-with-d3/tree/15-stacked-bar-chart что сработало отлично. Теперь я преобразовал большую часть своего кода для использования mobx, но я изо всех сил пытаюсь заставить это работать. Я оставил его для использования useState, но, похоже, он хочет постоянно обновляться. Как мне закодировать часть ‘onChange’?

                     onChange={(e) => {
                      if (e.target.checked) {
                        setKeys(Array.from(new Set([...keys, key])));
                      } else {
                        setKeys(keys.filter((_key) => _key !== key));
                      }
 

Итак, setKeys в хранилище должно выглядеть так, а не то, что это не функция со стрелкой:

       setKeys(key, checked) {
        if (checked) {
          this.keys = Array.from(new Set([...this.keys, key]));
        } else {
          this.keys = this.keys.filter((_key) => _key !== key);
        }
      }
 

И вы используете это так:

     onChange={(e) => {
        store.setKeys(key, e.target.checked);
    }}
 

Codesandbox: https://codesandbox.io/s/httpsstackoverflowcomquestions65207564-0odbx?file=/src/App.js:1657-1758