如何将数据映射到反应组件？

Posted 2023-02-21

【中文标题】如何将数据映射到反应组件？

【英文标题】：How to map data to react component?

【发布时间】：2022-01-23 07:06:21

【问题描述】：

我有从后端返回的数据，现在我正在尝试将其映射到反应组件，该组件抛出错误Cannot read property of null 在 div 或卡中打印键的正确方法是什么，我还附加了数据

index.js

import React,  Component  from 'react';
import './app.css';
import ReactImage from './react.png';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import  styled  from '@mui/material/styles';

export default class JOB_DESC extends Component 
  state =  data: null ;

  async componentDidMount() 
    try 
      const response = await fetch('/api/getUsername');
      const data = await response.json();
      this.setState( data: data );
     catch (e) 
      if (e.name != "AbortError") this.setState( error: e.message );
    
  

  render() 
    const data = this.state.data;
    console.log("DATA", data);
    return (
      <Box sx= flexGrow: 1 >
        <AppBar position="static">
          <Toolbar>
            <IconButton
              size="large"
              edge="start"
              color="inherit"
              aria-label="menu"
              sx= mr: 2  >
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" component="div" sx= flexGrow: 1 >
              Job.com
            </Typography>
          </Toolbar>
        </AppBar>
        <div style= padding: 20 >
          <Grid container spacing=4>
            <Grid item xs=12>
                <p>`data["User Account"]`</p>
                <p>`data["User Location"]`</p>
                <p> `data["Company Name"]`</p>
            </Grid>
          </Grid>
        </div>
      </Box>
    );
  

数据

 ‘User Account': Admin’,
‘User Location': ': New York, NY',
 'Company Name': ': Millennium’ 

【问题讨论】：

你看到data打印在浏览器控制台了吗？

data 状态值最初为 null，因此在挂载和初始渲染时，它试图读取 null 的那些属性。您必须处理这样一个事实，即数据需要一些时间来加载，因为它是异步获取的，因此呈现加载微调器或消息，直到 data 不再为空

@tromgy 是的，它正在浏览器控制台中打印

正如 Jayce444 所说。 render() 方法发生在 componentDidMount 函数之前。这就是你得到错误的原因。试试 data&&....

【参考方案1】：

看起来当你的组件被渲染时，数据仍然是空的，因为你已经将它设置为空。所以尝试索引 null 会给你Cannot read property of null。

您想要做的是用一个条件包装您的组件，以检查数据在呈现时是否存在。

 data && (
    <div style= padding: 20 >
        <Grid container spacing=4>
            <Grid item xs=12>
                <p>`data["User Account"]`</p>
                <p>`data["User Location"]`</p>
                <p> `data["Company Name"]`</p>
            </Grid>
        </Grid>
    </div>
)