Javascript 物料ui表未更新

我目前正在将我的react站点更新为16.8版本，并且无意中遇到了一个关于材质ui表的问题。在我的应用程序中，用户选择一些选项，然后在用户单击按钮时进行rest调用，并将所述调用的结果添加到表中

当前，即使返回结果，该表仍保持空白。我已经使用MaterialUI表示例创建了一个行为模型。（请注意，表数据的格式是web服务返回的格式，我还尝试将arr.map函数移动到handleClick函数中，并将其设置为arr，然后简单地将arr放在表体中）

有人知道我做错了什么吗

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

//在此处完成上述导入
//使用示例数据代替执行rest调用
var outRo={
id:‘冷冻酸奶’，
卡路里：159，
脂肪：6.0，
碳水化合物：24，
蛋白质：4.0，
};
导出默认函数SimpleTable（）{
const[arr，setArr]=useState（[]）；
函数handleClick（）{
console.log（'inside'）；
//rest调用获取数据，存储到outRo中
setArr（数组.from（outRo））；
}
返回(
添加到表中
甜点（100克）
卡路里
脂肪（g）
碳水化合物（克）
蛋白质（g）
{arr.map（行=>(
{row.id}
{row.carries}
{row.fat}
{row.carbs}
{row.protein}
))}
);
}

数组。from（outRo）

返回一个空数组

var outRo={
id:“冷冻酸奶”，
卡路里：159，
脂肪：6.0，
碳水化合物：24，
蛋白质：4.0
};
console.log（Array.from（outRo））；//[]

编辑-请求更新答案以显示如何包含多个项目：

// imports removed for brevity
const row1 = {
  Name: "Frozen yoghurt",
  calories: 159,
  fat: 6.0,
  carbs: 24,
  protein: 4.0
};

const row2 = {
  Name: "foyo",
  calories: 222,
  fat: 4.0,
  carbs: 124,
  protein: 5.0
};

//results are captured and put into an array like such
var testAr = [];
testAr.push(row1, row2);

export default function SimpleTable() {
  const [resultRows, setResultRows] = useState([]);

  function handleClick() {
    setResultRows(testAr);
  }

  return (
    <div>
      <Button onClick={handleClick}> click</Button>
      <TableContainer component={Paper}>
        <Table className={"table"} aria-label="simple 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>
            {resultRows.map(row => (
              <TableRow key={row.Name}>
                <TableCell>{row.Name} </TableCell>
                <TableCell>{row.calories}</TableCell>
                <TableCell>{row.fat}</TableCell>
                <TableCell>{row.carbs}</TableCell>
                <TableCell>{row.protein}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  );
}

//为简洁起见，已删除导入
常量行1={
名称：“冷冻酸奶”，
卡路里：159，
脂肪：6.0，
碳水化合物：24，
蛋白质：4.0
};
常量行2={
名称：“foyo”，
卡路里：222，
fat:4.0，
碳水化合物：124，
蛋白质：5.0
};
//结果被捕获并放入这样的数组中
var-testAr=[]；
测试器推送（第1行，第2行）；
导出默认函数SimpleTable（）{
const[resultRows，setResultRows]=useState（[]）；
函数handleClick（）{
setResultRows（testAr）；
}
返回(
点击
甜点（100克）
卡路里
脂肪（g）
碳水化合物（克）
蛋白质（g）
{resultRows.map（行=>(
{row.Name}
{row.carries}
{row.fat}
{row.carbs}
{row.protein}
))}
);
}

这实际上比第一个请求简单得多，因为您已经从对象创建了数组

---

因此，您所需要做的就是使用setResultRows推送新创建的数组，如上所述。

这非常适合添加一行！如果需要添加多行，则似乎只添加最后一行，而忽略前一行。我将它设置为handleClick进入一个函数，其中多个响应循环通过，每个响应进入一个addToTable函数，它似乎进入这个函数的次数与结果正确的次数相同，只是没有实际显示在表上。@Uciebila是的，它每次都会添加相同的行，它是硬编码的，您应该添加这些多个响应，以便我们能够给出更准确的答案，这是我在这里可以复制的最接近的答案！希望这能提供更好的洞察力嗨，谢谢你，你知道如何使它与多行一起工作吗？（如图所示：）就目前而言，它只是忽略了除one@Uciebila答案更新为包含多行。