提取后无法显示数据 [英] Can't display data after fetch

问题描述

我试图通过axios从REST端点获取数据，然后将其呈现在我的app.js组件中，然后使用上下文API将其提供给整个应用程序:

I'm trying to get a data from an REST endpoint through axios and then render them in my app.js component and after that provide them to the whole app by using context 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

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"属性，但它仍能正常工作，但它显示此错误:无法读取未定义"

The first problem is that when I try to render it like that it shows that my "log" property despite that I logged it and tested it and it works fine, it shows this error: "Cannot read property 'log' of undefined"

第二个问题是，当我删除具有此属性的CustomTableCell时，它将把我的数据加载到表外，并为我提供了表外的整个对象数组.

second issue is that when I remove CustomTableCell which have this property then it loads my data outside of the table and it gives me the whole array of objects outside of my table.

因此，这里将对您有所帮助.

So, any help will be appreciated here.

推荐答案

如果您打算使用异步函数，请不要使用.then()，这在我看来很难跟踪.我从未在组件上使用过异步安装，并且此答案假定还可以，但请尝试

If your going to use async functions then don't use .then() it makes it too hard to track in my opinion. I have never used async on component did mount and this answer assumes that that's fine but try this

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

这篇关于提取后无法显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！