React material-table переопределяет таблицу с новыми данными, только если я обновляю данные дважды

Question

Я использую таблицу материалов (https://material-table.com/# / ), которая построена с помощью React.

У меня есть данные, поступающие в качестве опоры в таблицу материалов, как показано в коде ниже. Я обычно нажимаю кнопку в родительском компоненте, чтобы изменить реквизит в компоненте Performancetbl. Но когда я нажимаю на кнопку один раз, таблица не перерисовывается с новыми данными. Когда я нажимаю на него еще раз, он перерисовывается. Почему это происходит?

Я пытался сохранить реквизиты в состояние переменной состояния в компоненте Performancetbl, но это никак не изменило поведение.

Я также пытался console.log(props.datas) проверить, появляются ли правильные данные при первом нажатии на кнопку. И это действительно правильное значение! Ребята, вы можете понять, почему это происходит?

function Performancetbl(props) {   
    const options = { 
        ...
    };
    console.log(props.datas)
    return(
        <div style={{ maxWidth: "100%" }}>
            <MaterialTable
                title="Overall"
                data={props.datas}
                columns={props.columns}        
                options={options}
                components={props.components}
            />
        </div>
    );
}

export default Performancetbl;

Спасибо!

Answer 1

Причина, по которой это, скорее всего, происходит с вами, заключается в том, что вы визуализируете таблицу до получения данных.

Пожалуйста, посмотрите следующую демонстрацию о том, как получить данные из API и передать их через реквизиты.

Вы можете посмотреть живую демонстрацию здесь

---

ParentComponent. js

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

export default function ParentComponent() {
  const [tableData, setTableData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  const columns = [
    {
      title: "Id",
      field: "id"
    },
    {
      title: "UserId",
      field: "userId"
    },
    {
      title: "Title",
      field: "title"
    },
    {
      title: "Completed",
      field: "completed"
    }
  ];

  const tableDiv = {
    marginTop: "30px"
  };

  const shadowStyle = {
    boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)"
  };

  const btnStyle = {
    height: "40px",
    width: "300px",
    fontSize: "24px",
    cursor: "pointer",
    ...shadowStyle
  };

  const headStyle = {
    textAlign: "center",
    padding: "20px",
    backgroundColor: "lightcoral",
    ...shadowStyle
  };

  const sleep = time => {
    return new Promise(resolve => setTimeout(resolve, time));
  };

  const fetchData = async () => {
    setIsLoading(true);
    // Add a timeout to give the appearance of long load times
    await sleep(3000);

    try {
      const resp = await fetch("https://jsonplaceholder.typicode.com/todos");
      const json = await resp.json();
      setTableData(json);
    } catch (err) {
      console.trace(err);
      alert(err.message + "\r\n\r\nSee console for more info.");
    }
    setIsLoading(false);
  };

  return (
    <div>
      <div style={headStyle}>
        <h1>Click button to get data</h1>
        <button style={btnStyle} onClick={fetchData}>
          Click Me To Get API Data
        </button>
      </div>
      <div style={tableDiv}>
        <AppTable data={tableData} columns={columns} isLoading={isLoading} />
      </div>
    </div>
  );
}

---

AppTable. js (использует material-table)

import React from "react";
import MaterialTable from "material-table";
import tableIcons from "./TableIcons.js";

export default function AppTable({ data, columns, ...rest }) {
  return (
    <MaterialTable
      {...rest}
      icons={tableIcons}
      columns={columns}
      data={data}
    />
  );
}