Таблица пользовательского интерфейса не обновляется

Question

В настоящее время я обновляю свой реагирующий сайт до 16,8 и столкнулся с проблемой с таблицей пользовательского интерфейса. В моем приложении пользователи выбирают некоторые параметры, после чего пользователь нажимает кнопку «покой», и результат этого вызова добавляется в таблицу.

В настоящее время таблица остается пустой, даже когда возвращается результат. Я создал пример поведения, используя пример таблицы пользовательского интерфейса материала. (Обратите внимание, что данные таблицы имеют формат, в котором их возвращает веб-служба, и я также попытался переместить функцию 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

РЕДАКТИРОВАТЬ - Требуется обновить ответ, чтобы показать, как включить несколько элементов:

// 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 для pu sh недавно созданного массива, как указано выше.

Answer 2

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