材料ui表未更新

Question

我当前正在将我的反应站点更新为16.8，并且偶然遇到了一个材料ui表问题。在我的应用程序中，用户选择一些选项，然后当用户单击按钮时进行一次休息呼叫，并将该呼叫的结果添加到表中。

当前，即使返回结果，表仍为空白。我已经使用材料ui表示例创建了行为的example。（请注意，表数据采用Web服务返回的格式，我也尝试将arr.map函数移至handleClick函数并将其设置为Arr，然后将arr放入TableBody中））

有人知道我在做什么错吗？

//imports done above here 
//example data used instead of performing rest call

var outRo = {
  id: 'Frozen yoghurt', 
  calories: 159, 
  fat: 6.0, 
  carbs: 24, 
  protein: 4.0,
};

export default function SimpleTable() {
  const [arr, setArr] = useState([]); 

  function handleClick() {
    console.log('inside');
    //rest call gets data, stores into outRo 

    setArr(Array.from(outRo));
  }


  return (
    <div>
      <Button onClick = {handleClick}> Add to Table </Button>
      <TableContainer component={Paper}>
        <Table className={'table'}>
          <TableHead>
            <TableRow>
              <TableCell>Dessert (100g serving)</TableCell>
              <TableCell>Calories</TableCell>
              <TableCell>Fat&nbsp;(g)</TableCell>
              <TableCell>Carbs&nbsp;(g)</TableCell>
              <TableCell>Protein&nbsp;(g)</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {arr.map(row => (
              <TableRow key={row.id}>
                <TableCell>
                  {row.id}
                </TableCell>
                <TableCell>{row.calories}</TableCell>
                <TableCell>{row.fat}</TableCell>
                <TableCell>{row.carbs}</TableCell>
                <TableCell>{row.protein}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  );
}

我当前正在将我的反应站点更新为16.8，并且偶然遇到了一个材料ui表问题。在我的应用程序中，用户选择一些选项，然后在用户单击按钮时进行休息呼叫，然后将...