Реакция: возврат функции до завершения выборки

Question

Когда я вызываю функцию ShowUserPanel (), я также вызываю функцию getUsers, которая дает мне данные, которые я должен вставить в строки var, необходимые для заполнения таблицы. Проблема в том, что функция ShowUserPanel возвращает пустую таблицу без данных, но если я go на другую страницу и возвращаюсь, таблица заполнена, я не знаю, как заполнить таблицу при вызове функции.

function createData(name, surname, username, email) {
    return { name, surname, username, email };
}

var rows = []

function getUsers(_callback) {
    fetch(conn, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            username: localStorage.getItem("username"),
        })
    }).then((response) => response.json())
        .then((responseJson) => {
            var name = new Array(responseJson[0]);
            var surname = new Array(responseJson[1]);
            var username = new Array(responseJson[2]);
            var email = new Array(responseJson[3]);
            var count = name[0]['length'];
            var temp = new Array();
            var i = 0;
            while (i <= count) {
                temp.push(createData(name[0][i], surname[0][i], username[0][i], email[0][i]));
                i++;
            }
            rows = temp;
            _callback();
        }).catch((error) => {
        console.error(error.toString());
    });
}

export default function ShowUserPanel() {
    getUsers(function () {
        console.log('finish');
    });
    const classes = useStyles();

    return (
        <div style={{display: 'flex', flexDirection: 'column', width: '100%', height: '100%'}}>
            <div>
                <h1>SHOW USERS</h1>
            </div>
            <div>
                <UserButtonList/>
            </div>
            <div style={{
                width: '100%',
                height: '100%',
                display: 'felx',
                alignItems: 'center',
                justifyContent: 'center'
            }}>
                <Card style={{
                    width: '100%',
                    height: '100%',
                    marginTop: '10px',
                    backgroundColor: 'transparent',
                    color: 'white'
                }}>
                    <TableContainer component={Paper}>
                        <Table className={classes.table} aria-label="customized table">
                            <TableHead>
                                <TableRow>
                                    <StyledTableCell align="center">NAME</StyledTableCell>
                                    <StyledTableCell align="center">SURNAME</StyledTableCell>
                                    <StyledTableCell align="center">USERNAME</StyledTableCell>
                                    <StyledTableCell align="center">EMAIL</StyledTableCell>
                                </TableRow>
                            </TableHead>
                            <TableBody>
                                {rows.map((row) => (
                                    <StyledTableRow key={row.name}>
                                        <StyledTableCell component="th" scope="row" align="center">
                                            {row.name}
                                        </StyledTableCell>
                                        <StyledTableCell align="center">{row.surname}</StyledTableCell>
                                        <StyledTableCell align="center">{row.username}</StyledTableCell>
                                        <StyledTableCell align="center">{row.email}</StyledTableCell>
                                    </StyledTableRow>
                                ))}
                            </TableBody>
                        </Table>
                    </TableContainer>
                </Card>
            </div>
        </div>
    );
}

Answer 1

Проблема:

Вы обновляете переменную rows, и она обновляется, но React не заботится об этом, для повторной визуализации, если вы хотите повторно визуализировать компонент, который вы можете использовать state, и любое изменение в нем вызовет повторную визуализацию, поэтому вы не получаете обновленную dom в первый раз, но когда вы вернетесь на эту страницу, уже есть данные, загруженные из предыдущего запроса, который вы сделано, поэтому он отобразит это.

---

Решение:

Здесь вы go, вы можете сделать что-то подобное с помощью useState и useEffect, пожалуйста, прочтите комментарии, надеюсь, что вы все проясните

// var rows = [] // <----- Remove this

function getUsers(_callback){
    fetch(conn, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                username: localStorage.getItem("username"),
            })

            }).then((response) => response.json())
                .then((responseJson) => {
                var name = new Array(responseJson[0]);
                var surname = new Array(responseJson[1]);
                var username = new Array(responseJson[2]);
                var email = new Array(responseJson[3]);
                var count = name[0]['length'];
                var temp = new Array();
                var i = 0;
                while(i <= count){
                    temp.push(createData(name[0][i], surname[0][i], username[0][i], email[0][i]));
                    i++;
                }
                rows = temp; 
                _callback(rows); // <----------- HERE, passing back data
                }).catch((error) => {
                    console.error(error.toString());
                });
}

export default function ShowUserPanel() {

    const [rows,setRows] = useState([]) // <----- We'll need state to re-render

    useEffect(() => { // <----- Need useEffect for lifecycle hooks
        getUsers(function(rowsData){ // <----- getting data back from function to set state and re-render with it
            console.log('finish');
            setRows(rowsData); // <----- Setting up state, so react will know to re render
        });
    },[]); // <----- HERE, for once time load only ( on mount only )

    const classes = useStyles();

    return (
        ...
    );
}

Answer 2

вам нужно использовать useEffect для вызова функции и использовать состояние для хранения rows данных, например:

function createData(name, surname, username, email) {
  return { name, surname, username, email };
}

export default function ShowUserPanel() {
  const [rows, setRows] = useState([]); // <-- Add [] as default value

  useEffect(() => {
    function getUsers(_callback) {
      fetch(conn, {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          username: localStorage.getItem("username")
        })
      })
        .then(response => response.json())
        .then(responseJson => {
          var name = new Array(responseJson[0]);
          var surname = new Array(responseJson[1]);
          var username = new Array(responseJson[2]);
          var email = new Array(responseJson[3]);
          var count = name[0]["length"];
          var temp = new Array();
          var i = 0;
          while (i <= count) {
            temp.push(
              createData(name[0][i], surname[0][i], username[0][i], email[0][i])
            );
            i++;
          }
          setRows(temp);
          _callback();
        })
        .catch(error => {
          console.error(error.toString());
        });
    };

    getUsers(function() {
      console.log("finish");
    });

  }, []);
  const classes = useStyles();

  return <div>Your HTML</div>