React 中的 Mobx 和 d3 Stacked Bar

【问题标题】：Mobx and d3 Stacked Bar in ReactReact 中的 Mobx 和 d3 Stacked Bar
【发布时间】：2020-12-08 22:02:10
【问题描述】：

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

根据链接的代码框，我有一个条形图，可以计算一个月内来自 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));
                      }

【问题讨论】：

标签： reactjs d3.js mobx

【解决方案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);
    }}

代码沙盒：https://codesandbox.io/s/httpsstackoverflowcomquestions65207564-0odbx?file=/src/App.js:1657-1758

【讨论】：

甜，它按预期工作，但现在图表的刷新不是它应该的那样。每次点击都不会删除之前的点击，只是在顶部绘制。