React.js中如何刷新DataGridTable？CloudTables不更新问题

现有两个React组件：TokenText与DataGridTable。TokenText组件的input1Value和input2Value传递给DataGridTable后，其中的CloudTables组件不会自动刷新；调用window.location.reload(true)整页刷新也无效。请问如何实现DataGridTable组件的局部刷新？

DataGridTable组件代码 #

import React,{useEffect} from 'react';
import CloudTables from '@cloudtables/react';
import { useState } from 'react';


function DataGridTable  ({ input1Value, input2Value }) 
{
  
    return (
    <div className="container mt-5">
     <section  >
          <div>
      <p>Received values:</p>
      <p>Input 1: {input1Value}</p>
      <p>Input 2: {input2Value}</p>
      <button variant="primary" onClick={() => {
         handleinput();
         refresh();
        }}>click!</button>
    </div>
      <CloudTables
      src={input1Value}
      apiKey={input2Value} ></CloudTables>
      </section>

    </div>
  );
}
export default DataGridTable

TokenText组件代码 #

import React, { useState } from 'react';

function TokenText({ onButtonClick }) {
  const [input1, setInput1] = useState('');
  const [input2, setInput2] = useState('');

  const handleButtonClick = () => {
    onButtonClick(input1, input2);
  };

  return (
    <div className="container mt-5">
        <section  >
      <input
        type="text"
        placeholder="Enter text for input 1"
        value={input1}
        onChange={(e) => setInput1(e.target.value)}
      />
      <input
        type="text"
        placeholder="Enter text for input 2"
        value={input2}
        onChange={(e) => setInput2(e.target.value)}
      />
      <div className="d-grid gap-2">
      <button  variant="primary" onClick={handleButtonClick}>Send to Another Component</button>
      </div>
      </section>
    </div>
  );
}

export default TokenText;

注：调用const refresh = () => window.location.reload(true)整页刷新无效。

解决方案 #

核心原因 #

CloudTables组件未监听src和apiKey的props变化，导致外部参数更新时，组件自身不会触发数据刷新或重新初始化。

实现方式 #

方式1：通过key强制组件重建

React中，当组件的key属性值变化时，会销毁旧组件实例并创建新实例。将input1Value和input2Value组合作为key，即可在参数更新时强制CloudTables重新初始化：

修改后的DataGridTable组件：

import React from 'react';
import CloudTables from '@cloudtables/react';

function DataGridTable({ input1Value, input2Value }) {
  // 用两个输入值组合生成唯一key
  const cloudTableKey = `${input1Value}-${input2Value}`;

  const handleRefresh = () => {
    // key变化已触发组件重建，无需额外刷新逻辑
  };

  return (
    <div className="container mt-5">
      <section>
        <div>
          <p>Received values:</p>
          <p>Input 1: {input1Value}</p>
          <p>Input 2: {input2Value}</p>
          <button variant="primary" onClick={handleRefresh}>click!</button>
        </div>
        <CloudTables
          key={cloudTableKey}
          src={input1Value}
          apiKey={input2Value}
        />
      </section>
    </div>
  );
}
export default DataGridTable;

方式2：调用CloudTables实例的刷新方法（若组件支持）

如果@cloudtables/react组件提供了实例刷新API，可通过useRef获取组件实例，在参数变化时主动调用刷新方法：

修改后的DataGridTable组件：

import React, { useRef, useEffect } from 'react';
import CloudTables from '@cloudtables/react';

function DataGridTable({ input1Value, input2Value }) {
  const cloudTableRef = useRef(null);

  // 监听输入值变化，触发组件内部刷新
  useEffect(() => {
    if (cloudTableRef.current) {
      // 假设组件实例提供refresh方法，具体以官方文档为准
      cloudTableRef.current.refresh();
    }
  }, [input1Value, input2Value]);

  const handleRefresh = () => {
    if (cloudTableRef.current) {
      cloudTableRef.current.refresh();
    }
  };

  return (
    <div className="container mt-5">
      <section>
        <div>
          <p>Received values:</p>
          <p>Input 1: {input1Value}</p>
          <p>Input 2: {input2Value}</p>
          <button variant="primary" onClick={handleRefresh}>click!</button>
        </div>
        <CloudTables
          ref={cloudTableRef}
          src={input1Value}
          apiKey={input2Value}
        />
      </section>
    </div>
  );
}
export default DataGridTable;

注意事项 #

• 方式1实现简单，适用于组件无内置刷新API的场景，但会销毁重建组件，存在轻微性能开销。
• 方式2更高效，直接调用组件内部逻辑，但需确认@cloudtables/react组件是否支持通过ref获取实例并调用刷新方法。

内容的提问来源于stack exchange，提问作者bolofar