反應 js 從父事件中更新子 state

Question

我有一個 WebSocket 正在向客戶端提供數據，並且我在使用 D3 反應的圖表中顯示它（數據），所以我希望我的圖表根據數據進行更改，但是要更改圖表組件的 state ，我必須從定義 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;

謝謝

Answer 1

問題就在這里

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

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

在首次渲染Chart組件時，您使用來自父組件的數據創建本地數據。 使用useEffect您正在查看本地數據（不是來自父級的數據），但它永遠不會改變，因為您永遠不會在Chart組件內調用setData 。 如果它確實有效，本地 state 將不可能。

解決方案是直接使用來自 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;

Answer 2

感謝評論中的@Mario，我發現了問題，首先我從子組件中刪除了 state，並在 useEffect 中使用了道具，然后正如@Mario 所說我改變了

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

和

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

因為，state 甚至沒有改變，我只向我已經擁有的氣體陣列添加了一個元素，但是對於 state 更改直接屬性應該辭職。

Answer 3

您需要為 state 變量分配一個新值。 請試試這個

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

在你的情況下，你正在改變它的價值