Блог

Я получаю объект сообщений через вызов API и обновляю состояние с помощью свойства message в объекте. Я использую сетку в material-ui для отображения этих входящих сообщений. Из того, что я могу сделать, следует, что вам нужно жестко закодировать сеточное пространство перед рендерингом таким образом:

  <Grid container spacing={3}>
        <Grid item xs>
          <Paper className={classes.paper}>xs</Paper>
        </Grid>
        <Grid item xs>
          <Paper className={classes.paper}>xs</Paper>
        </Grid>
        <Grid item xs>
          <Paper className={classes.paper}>xs</Paper>
        </Grid>
      </Grid>
 

Я хочу, чтобы каждый раз, когда я получаю информацию от вызова API, компонент добавлял строку в сетку и отображал там информацию. Есть ли какой-нибудь способ сделать это?

Вы можете сделать это, используя свой список ответов на вызовы api:

 const PaperList = [
  {
    key: 'Paper 1'
  },
  {
    key: 'Paper 2'
  },
  {
    key: 'Paper 3'
  },
  {
    key: 'Paper 4'
  }
];

<div className={classes.root}>
      <Grid container spacing={3}>
        {PaperList.map(value => (
          <Grid item key={value.key} style={{ width: '33.333%' }}>
            <Paper key={value.key} className={classes.paper}>{value.key}</Paper>
          </Grid>
        ))}
      </Grid>
    </div>