材料ui表未更新

问题描述 投票:0回答:1

我当前正在将我的反应站点更新为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表问题。在我的应用程序中,用户选择一些选项,然后在用户单击按钮时进行休息呼叫,然后将...

javascript reactjs material-ui
1个回答
0
投票

Array.from(outRo)返回一个空数组,

© www.soinside.com 2019 - 2024. All rights reserved.