Данные строк из axios в material-table отображаются только после обновления страницы

В настоящее время я столкнулся с проблемой, что данные из запроса axios POST в material-table не отображаются мгновенно. Мне нужно обновить их, чтобы они отобразились. Структура запроса axios выглядит следующим образом:

export default function DataWorker() {
  
  const [entries, setEntries] = useState({
    data: [
      {
        id: "",
        position: "",
        defect: "",
        tool: ""
      }
    ]
  });

  const [state] = React.useState({
    columns: [
      { title: "Position", field: "position" },
      { title: "Defect Type", field: "defect" },
      { title: "Tool Decision", field: "tool" }
    ]
  });

  const url = "http://127.0.0.1:8000/api/manual_ver_data/"

  useEffect(() => {
    axios.get(url)
    .then(response => {
      let data = [];
      response.data.forEach(el => {
        data.push({
          id: el.id,
          position: el.position,
          defect: el.defect,
          tool: el.tool
        });
      });
      setEntries({ data: data });
    })
  }, []);

  return (
    <MaterialTable

      columns={state.columns}
      data={entries.data}
      
      editable={{
        onRowAdd: (newData) =>
        new Promise(resolve => {
          setTimeout(() => {
            resolve();

            const data = [...entries.data];
            const populateData = (axiosResponse) => {data.push(axiosResponse)}
            
            axiosCallBack(populateData)
            console.log(data)

            function axiosCallBack (populateData) {
              axios.post(url, newData)
              .then(function(res){
                populateData(res.data)
              })  
            };
            setEntries({ ...entries, data });
          }, 600)
        })
      }}
    />
  )
};

Это мой view.py:

@api_view(['GET', 'POST'])
def TableViewList(request):
    
    if request.method == 'POST':
        serializer = TabelSerializer(data=request.data)
        
        if serializer.is_valid():
            serializer.save()
            
            return Response(serializer.data, status=status.HTTP_201_CREATED)
        
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

После проверки console.log(data) данные выглядят следующим образом:

[]
0: {id: 197, position: 'Position 1', defect: 'Defect 1', tool: 'Tool 1'}
length: 1
[[Prototype]]: Array(0)

Я обнаружил, что после обновления страницы появляется дополнительный ключ словаря tableData.

[]0
0: {id: 197, position: 'Position 1', defect: 'Defect 1', tool: 'Tool 1', tableData: {…}}
length: 1
[[Prototype]]: Array(0)

tableData: {id: 0}

Похоже, что материал-таблица требует tableData в качестве ключа для расположения данных в строке. Но я действительно хочу отображать данные строки без обновления, возможно ли включить tableData вручную? И как это сделать?

Вернуться на верх