1

我有一个向客户端提供数据的 WebSocket，并且我在使用 D3 反应的图表中显示它（数据），所以我希望我的图表根据数据进行更改，但要更改图表组件的状态，我必须从定义 onMessage 事件的父组件访问它，我的问题是图表没有更新：

父组件：

class App extends Component {
constructor(props) {
    super(props);
    this.state = {
      data: [],
    };
  }
  handleData(data) {
      let result = JSON.parse(data);
      this.setState((state) => {
        state.data.push(result.c.gas);
      });
  }

  render() {
    return (
      <div>
        <Websocket
          url={`ws://${window.location.host}/ws/mqtt_app/1/`}
          onMessage={this.handleData.bind(this)}
        />
        <Chart data={this.state.data} />
      </div>
    );
  }
}

子组件：

const Chart = (props) => {
  const [data, setData] = useState(props.data);
  const svgRef = useRef();

  useEffect(() => {
    // chart definition
  }, [data]);

  return (
    <React.Fragment>
      <svg ref={svgRef}>
        <g className="x-axis"></g>
        <g className="y-axis"></g>
      </svg>
    </React.Fragment>
  );
};

export default Chart;

谢谢

4

3 回答 3

0

问题就在这里

const [data, setData] = useState(props.data);
const svgRef = useRef();

useEffect(() => {
  // chart definition
}, [data]);

在首次渲染Chart组件时，您使用来自父组件的数据创建本地数据。随着useEffect您正在观看本地数据（不是来自父级的数据），但它永远不会改变，因为您永远不会在组件setData内部调用Chart。如果它确实有效，本地状态将是不可能的。

解决方案是直接使用来自 parent 的数据并将您的// chart definition直接放在 中Chart，而不是useEffect

const Chart = (props) => {
  const svgRef = useRef();
  // chart definition

  return (
    <React.Fragment>
      <svg ref={svgRef}>
        <g className="x-axis"></g>
        <g className="y-axis"></g>
      </svg>
    </React.Fragment>
  );
};

export default Chart;
于 2020-06-16T22:20:55.353 回答
0

感谢评论中的@Mario，我发现了问题，首先我从子组件中删除了状态，并在useEffect中使用了道具，然后@Mario说我改变了

     this.setState((state) => {
        state.gas.push(result.c.gas);
      });

和

this.setState((state) => ({ gas: [...state.gas, result.c.gas] }));

因为，状态甚至没有改变，我只是在我已经拥有的气体数组中添加了一个元素，但是对于改变直接属性的状态应该辞职。

于 2020-06-17T14:32:22.093 回答
0

您需要为状态变量分配一个新值。请试试这个

this.setState(state => ({ data: [...state.data, result.c.gas] }))

在你的情况下，你正在改变它的价值

于 2020-06-17T15:04:32.650 回答