Не могу отобразить данные после выборки - PullRequest
Новая
       32

Не могу отобразить данные после выборки

0 голосов
/ 09 мая 2019

Я пытаюсь получить данные из конечной точки REST через axios, а затем отобразить их в моем компоненте app.js, а после этого предоставить их всему приложению с помощью контекстного API:

axios.js

import axios from 'axios';

const instance = axios.create({
    baseURL: 'api_endpoint'
});


export default instance;

app.js 

import Context from './context'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      comp: []
    }
  };
async componentDidMount() {
     await instance.get('')
      .then(res => {
          const data = JSON.stringify(res.data.data)
          this.setState({comp: data});
          console.table('componentDidMount', data); // here I can log the data
      })
      .catch(err => {
        console.log(err)
      });

  }

 render () {
    return (

      <Context.Provider 
        value={{
          comp: this.state.comp
        }}>
      </comp.Provider>

    );
  }
}

export default App;

children.js 

import Context from '../../context'

class Children extends Component { 
    render () {
        const { classes } = this.props;
        return (
          <Context.Consumer>
                    {context => (
                  <Paper className={classes.root}>
                    <Table className={classes.table}>
                      <TableHead>
                        <TableRow>
                          <CustomTableCell>comp_id</CustomTableCell>
                          <CustomTableCell align="right">comp_name</CustomTableCell>
                          <CustomTableCell align="right">comp_price</CustomTableCell>
                          <CustomTableCell align="right">comp_log_usd</CustomTableCell>
                        </TableRow>
                      </TableHead>

                      <TableBody>
                        {Object.entries(context.comp).forEach(([key, value]) => (
                          <TableRow className={classes.row} key={value.id}>
                          <CustomTableCell component="th" scope="row">
                            {value.id}
                          </CustomTableCell>
                          <CustomTableCell align="right">{value.name}</CustomTableCell>
                          <CustomTableCell align="right">{value.price}</CustomTableCell>
                          <CustomTableCell align="right">{value.log.usd}</CustomTableCell>
                        </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </Paper>
              )}
            </Context.Consumer>
        );
    }

Первая проблема заключается в том, что когда я пытаюсь сделать так, это показывает, что мойСвойство «log», несмотря на то, что я зарегистрировал его и проверил, и оно работает нормально, показывает следующее сообщение об ошибке: «Не удается прочитать свойство« журнал »неопределенного» * ​​1012 *

Вторая проблема заключается в том, что при удалении CustomTableCell с этим свойствомзатем он загружает мои данные за пределы таблицы и выдает весь массив объектов за пределами моей таблицы.

Итак, любая помощь будет оценена здесь.

1 Ответ

0 голосов
/ 09 мая 2019

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

 async componentDidMount() {
  try{
   let response = await instance.get('')
   const data = JSON.stringify(response.data.data)
   this.setState({comp: data});
   console.table('componentDidMount', data); // here I can log the data
  }
  catch(error){console.log(error);
 }
...