Reactjs 如何仅重新渲染一个单元格？

我使用的是react表v7，我遇到了一个问题，当我更改一个单元格的数据时，整个表会重新呈现。我有数千行，所以每次重新渲染都非常慢

我的react表调用一个表单，用户可以填写该表单以从特定行中删除项目：该表单调用一个API来更改后端中的数据

我希望能够重新渲染包含我正在编辑的文章的关联位置的单元格，以反映我已从该单元格中删除了位置

Articles    Associated Locations
Article 1   **Paris, Brazil**
Article 2   Idaho, Illinois

将成为：

Articles    Associated Locations
Article 1   **Paris**
Article 2   Idaho, Illinois

这样我只会重新渲染右上角的单元格

简化代码：

App.js：

function App() {

  const columns = useMemo(
    () => [
      {
        columns: [
          {
            Header: "Article",
            accessor: "headline",
            Cell: row => (
              <div>
                {row.original.headline}
              </div>
            )
          },
          
          {
            Header: "Locations",
            id: "locations",
            Cell: ({ row }) => (
              <div>
                {row.original.tags}
              </div>
            )
          },
        ]
      }
    
    ],

    []
  );

  const [data, setData] = useState([]);

  
  useEffect(() => {
    (async () => {
      const result = await axios("/articles"); // fetch data from an API
      setData(result.data);
    })();
  }, []);

  return (
    <div className="App">
      <Table columns={columns} data={data} />
    </div>
  );
}
export default App;

函数应用程序（）{
const columns=useMoom(
() => [
{
栏目：[
{
标题：“文章”，
访问者：“标题”，
单元格：行=>(
{row.original.headline}
)
},
{
标题：“地点”，
id:“地点”，
单元格：（{row}）=>(
{row.original.tags}
)
},
]
}
],
[]
);
const[data，setData]=useState（[]）；
useffect（（）=>{
（异步（）=>{
const result=await axios（“/articles”）；//从API获取数据
setData（result.data）；
})();
}, []);
返回(
);
}
导出默认应用程序；

App.js调用Table.js：

表6.js：

export default function Table({ columns, data }) {
 
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,

  } = useTable(
    {
      columns,
      data,
    },
  );
  
  const renderRowSubComponent = React.useCallback(({ row }) => {
    return (
      <>
      <DeleteForm id={row.original.article_id} row={row} ></DeleteForm>
      </>
    );
    }
  );

  // Render the UI for your table
  return (
    <>
      <div>
        <table {...getTableProps()}>
          <thead>
            {headerGroups.map(headerGroup => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map(column => (
                  <th
                    {...column.getHeaderProps(column.getSortByToggleProps())}
                    className={
                      column.isSorted
                        ? column.isSortedDesc
                          ? "sort-desc"
                          : "sort-asc"
                        : ""
                    }
                  >
                    {column.render("Header")}
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody {...getTableBodyProps()}>
            {page.map((row, i) => {
              prepareRow(row);
          etc.

导出默认函数表（{columns，data}）{
常数{
可获取的道具，
getTableBodyProps，
校长组，
准备工作，
}=可用(
{
柱，
数据，
},
);
const renderRowSubComponent=React.useCallback（{row}）=>{
返回(
);
}
);
//呈现表的UI
返回(
{headerGroups.map（headerGroups=>(
{headerGroup.headers.map（列=>(
{column.render（“Header”）}
))}
))}
{page.map（（行，i）=>{
准备工作（世界其他地区）；
等

Table.js有一个DeleteForm，我用它调用一个API，从文章中删除一个选定的位置：

DeleteForm.js：

class DeleteForm extends Component {
  constructor(props){
    super(props);

    this.state = {
      article_id: 0,
      inputLoc: null,
      locations: [],
    };
  }
  
  onChange = e => {
    this.setState({inputLoc: e.target.value}, () => {
      console.log(this.state.inputLoc, 'inputLoc')
    })};

  deleteLocAssociation = () => {
    fetch...
    // API call that deletes the location in the backend
    this.setState({locations: APIResults})
  }

  componentDidMount(){
    if(this.state.inputLoc){
      this.deleteLocAssociation();
    }
  }

  render() {
    const row = this.props.row

    return (
      <Form onSubmit={this.deleteLocAssociation}>
        // Form for user to input a location
      </Form>
      

    )


  }
}

export default DeleteForm

类DeleteForm扩展组件{
建造师（道具）{
超级（道具）；
此.state={
文章编号：0，
inputLoc:null，
地点：[]，
};
}
onChange=e=>{
this.setState（{inputLoc:e.target.value}，（）=>{
console.log（this.state.inputLoc，“inputLoc”）
})};
deleteLocAssociation=（）=>{
取来
//删除后端位置的API调用
this.setState（{locations:apitresults}）
}
componentDidMount（）{
if（this.state.inputLoc）{
这个.deleteLocAssociation（）；
}
}
render（）{
常量行=this.props.row
返回(
//用于用户输入位置的表单
)
}
}
导出默认删除表单

我一直在寻找堆栈溢出，我能找到的最接近的问题是：

• ：没有帮助，因为我不想将react表降级到v6
• ：找到有关在react表中选择特定行的内容，但不确定如何将其应用于重新呈现选定行
• ：未答复

有些地方说虚拟化或分页可能会有所帮助，但我确实希望首先呈现表中的所有内容，因为我有一个搜索函数来查找数据，我希望所有数据都可用