Row data from axios in material-table only render after refreshing the page

Currently I am facing a problem that the data from axios POST request to material-table will not render immdiately. I need to refresh it in order to show it. I have a axios request structure like this:

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)
        })
      }}
    />
  )
};

This is my 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)

After checking the console.log(data), the data looks like this:

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

I found out that after refreshing the page, there is an additional dictionary key tableData.

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

tableData: {id: 0}

Seems like the material-table require tableData as a key to arrange the row data. But I really want to render the row data without refreshing, is it possible to include the tableData manually? and how to do that?

Back to Top