React 中的 Mobx 和 d3 Stacked Bar

Question

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

Answer 1

所以，商店里的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/httpsWhosebugcomquestions65207564-0odbx?file=/src/App.js:1657-1758

React 中的 Mobx 和 d3 Stacked Bar

Mobx and d3 Stacked Bar in React

reactjs

d3.js

mobx