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

Answer 1

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

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

console.log( Array.from(outRo) ); // []

要将对象添加到数组，请执行以下操作：

function handleClick() {
  setArr([...arr, outRo]);
}

Answer 2

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

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

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

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

物料用户界面表未更新

2 个答案: