如何刷新react.js中的部分组件

Question

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

input1Value 和 input2Value 来自另一个组件，当它们更改另一个组件时，cloudtables 不会自行刷新；

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;

当他们到达时，我想刷新 dataGridTable。我该怎么做？ 刷新整个页面不起作用，但希望是：const refresh = () => window.location.reload(true)

Answer 1

从 @cloudtables/react 源代码，它使用

src

和

apiKey

在挂载上创建一个实例，然后不再更新它。

你可以

1. 仅在

   CloudTables

   和

   src

   确认后才启动

   apiKey

2. 或者您可以将

   key

   属性添加到

   CloudTables

   ，以便每次更改这些值时它都会重新安装