reactjs - 如何只重新渲染一个单元格？

Question

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

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

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

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

会成为：

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

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

简化代码：

应用程序.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;

App.js 调用 Table.js：

表.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.

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

我一直在研究 Stack Overflow，我能找到的最接近的问题是：

• react-table 在 select 上重新渲染整个表：没有帮助，因为我不想将我的 react-table 降级到 v6
• select row on click react-table：找到了关于在 react-table 中选择特定行的信息，但不确定如何将其应用于重新渲染选定的行
• react-table 不断重新渲染未更改的单元格：未回答

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

标签： reactjsrenderingreact-tablereact-table-v7