Блог

Я хочу использовать массив для хранения данных, отправленных из базы данных. Однако контекст таблицы всегда отстает на один шаг.

Например, я добавляю 3 данные: (Ric History 95) , (Ric History 80) и (Ric Math 70) . Однако первая картинка была результатом после добавления (Ric History 80) , а вторая картинка-результат после добавления (Ric Math 70) .

Вот мой код.

 const Body = () =gt; {  ....  const [table, setTable] = useState([]);     const handleAdd = async () =gt; {  const {  data: { message, card, tabledata },  } = await axios.post('/api/create-card', {  name,  subject,  score,  });   if (!card) addErrorMessage(message);  else addCardMessage(card);   console.log("tabledata in add",tabledata);  setTable(tabledata);  };   const handleQuery = async () =gt; {  const {  data: { messages, message , tabledata},  } = await axios.get('/api/query-cards', {  params: {  type: queryType,  queryString,  },  });   if (!messages) addErrorMessage(message);  else addRegularMessage(...messages);  console.log("tabledata in query:", tabledata);  setTable(tabledata);  };   useEffect(() =gt; {  console.log("table has changed!", table);  }, [table])    return (  lt;Wrappergt;  /*other elements*/  { lt;TableContainer component={Paper}gt;  lt;Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table"gt;  lt;TableHeadgt;  lt;TableRowgt;  lt;TableCellgt;Namelt;/TableCellgt;  lt;TableCellgt;Subjectlt;/TableCellgt;  lt;TableCellgt;Scorelt;/TableCellgt;  lt;/TableRowgt;  lt;/TableHeadgt;  lt;TableBodygt;  {table.map((row) =gt; (  lt;TableRowgt;   lt;TableCell component="th" scope="row"gt;{row.name}lt;/TableCellgt;  lt;TableCellgt;{row.subject}lt;/TableCellgt;  lt;TableCellgt;{row.score}lt;/TableCellgt;  lt;/TableRowgt;  ))}  lt;/TableBodygt;  lt;/Tablegt;  lt;/TableContainergt;}  lt;/Wrappergt;     ); };   

Я был бы очень признателен, если бы кто-нибудь помог мне исправить эту ошибку.