子組件未使用更新的道具重新渲染

我有一個子組件，它查看并在 DOM 中創建 Canvas 元素，然后 useEffect() 將內容繪制到這些 Canvases：

import { useEffect } from "react";

function Table(props) {
  console.log(">> In Table, props is ", props);

  useEffect(() => {
    console.log(">> in useEffect ");

    // prepare the data to render here and render to the multiple HTML Canvases in the DOM
  }, []);

  const options = [
    { value: 0, label: "1" },
    { value: 1, label: "2" }
  ];

  const onChannelXChange = (option) => {
    console.log("1. send the change back to the parent");

    let change = {
      type: "ChannelIndexChange",
      // TODO need to get the plot here
      plotIndex: 0,
      channel: "x",
      value: option.value,
    };
    props.parentCallback(change);
  };

  return (
    <table className="workspace">
      <tbody>
          <tr key={`tr-${fileIndex}`}>
            {props.workspaceState.plots.map((plot, plotIindex) => {
              return (
                <td key={`td-${plotIindex}`}>
                  <div>
                    <canvas
                      className="canvas"
                      id={`canvas-${fileIndex}-${plotIindex}`}
                      width="400"
                      height="400"
                    />
                    <Dropdown
                      options={options}
                      onChange={onChannelXChange}
                      placeholder="Select an option"
                    />
                  </div>
                </td>
              );
            })}
          </tr>
      </tbody>
    </table>
  );
}

export default Table;

它是父組件：

import Table from "./Table";
import React, { useState } from "react";

class Workspace extends React.Component {
  constructor(props) {
    super();

    this.state = {
      workspaceState: {},
    };

    this.state.workspaceState = props.workspaceState;

    this.handleCallback = this.handleCallback.bind(this);
  }

  handleCallback = (option) => {
    this.props.workspaceState.value = option.value;

    // I expect this to re-render the Table Component with the updated props
    console.log("2. updating state");
    this.setState({ workspaceState: this.props.workspaceState });
  };

  render() {
    return (
      <Table
        enrichedEvents={this.props.enrichedEvents}
        workspaceState={this.props.workspaceState}
        className="workspace"
        parentCallback={this.handleCallback}
      ></Table>
    );
  }
}

export default Workspace;

當用戶單擊下拉選單時，我將值傳遞回父組件（作業區）。然后這會更新作業區狀態，然后我希望重新渲染子組件 - 除非它不是。當我查看日志時，我看到：

Workspace.js:44 1. send the change back to the parent
Workspace.js:44 2. updating parent state component
Table.js:95 >> props is {workspaceState: {...}}

但我沒有看到：

 >> in useEffect

我只在應用程式第一次運行時看到此日志。Table 組件確實獲得了新的更新道具，但它不會使用這些新資料重新渲染。我究竟做錯了什么？

uj5u.com熱心網友回復：

組件絕對是重新渲染（因為這就是 react 的作業方式），但useEffect鉤子的執行并不與關聯組件的每個渲染耦合（實際上，這就是它的目的）。

你提供了useEffect(() => {}, [])

第二個引數是“依賴”陣列。當它為空時，useEffect回呼將只執行一次，在組件首次掛載后立即執行。如果您希望它在發生更改時再次執行，則需要將更改的值包含在依賴項陣列中。

但是，如果您要使用更改的值觸發某種異步行為，通常只需要這樣做。如果“準備要渲染的資料”只是將其轉換為有用的格式，那么您根本不需要useEffect鉤子；該邏輯應該進入函式體。

uj5u.com熱心網友回復：

useEffect(() => {}, []) 替換舊 react 版本中的 componentDidMount，這意味著它只在將組件安裝到 DOM 后執行一次。我想知道你是否真的需要一個 useEffect 在你的情況下，如果你需要使用一個沒有依賴關系的 useEffect 的情況。像那樣：

import { useEffect } from "react";

function Table(props) {
  console.log(">> In Table, props is ", props);

  useEffect(() => {
    console.log(">> in useEffect ");

    // prepare the data to render here
  });

  const options = [
    { value: 0, label: "1" },
    { value: 1, label: "2" }
  ];

  const onChannelXChange = (option) => {
    console.log("1. send the change back to the parent");

    props.parentCallback(option);
  };

  return (
    <Dropdown
      options={options}
      onChange={onChannelXChange}
      placeholder="Select an option"
    />
  );
}

export default Table;

解決方案2：正如我所說，我想知道你是否真的需要一個 useEffect 你可以直接這樣做

import { useEffect } from "react";

function Table(props) {
  console.log(">> In Table, props is ", props);


    // put you logic directly here
    // prepare the data to render here
 
  const options = [
    { value: 0, label: "1" },
    { value: 1, label: "2" }
  ];

  const onChannelXChange = (option) => {
    console.log("1. send the change back to the parent");

    props.parentCallback(option);
  };

  return (
    <Dropdown
      options={options}
      onChange={onChannelXChange}
      placeholder="Select an option"
    />
  );
}

export default Table;

uj5u.com熱心網友回復：

你的效果沒有依賴，所以它會運行一次，類似于類組件的生命周期方法componentDidMount。如果您希望它在您的部分道具更改時運行，例如您需要它作為依賴項。

  useEffect(() => {
    console.log(">> in useEffect ");

    // prepare the data to render here and render to the multiple HTML Canvases in the DOM
  }, [props.workspaceState]);

您應該將作業空間狀態從父組件的狀態提供給您的子組件。

  <Table
    enrichedEvents={this.props.enrichedEvents}
    workspaceState={this.state.workspaceState}
    className="workspace"
    parentCallback={this.handleCallback}
  ></Table>

你以某種方式試圖直接改變父組件的道具，我不認為這是建議的。React 將無法識別這一點并進行重新渲染。

  handleCallback = (option) => {
    this.props.workspaceState.value = option.value;

    // I expect this to re-render the Table Component with the updated props
    console.log("2. updating state");
    this.setState({ workspaceState: this.props.workspaceState });
  };

標籤：javascript 反应

上一篇：將物件陣列與嵌套合并

下一篇：素性測驗PythonC擴展比純Python慢