React项目中Axios请求传递Props失败问题求助

下面针对你论坛开发中Axios请求失败及页面渲染异常的问题，逐一给出核心问题点和修复代码：

1. 状态字段不匹配，请求数据无法正确存储 #

ViewPosts组件初始化的state字段是post: null，但componentDidMount里更新状态时用了posts，字段名完全不一致，导致请求回来的数据根本没存入正确的状态中，后续渲染自然拿不到数据。

修复代码：

componentDidMount (){ 
    axios.get(`http://localhost:6006/api/v1/posts/${this.props._id}`)
          .then(res=> { 
            // 将posts改为post，与初始化的state字段保持一致
            this.setState({
                post: {...res.data.data, _id: this.props._id}
              })
              console.log('Pulling From::  ', res.data.data)
             })
          .catch(err => console.log('err::  ', err))
    } 

2. 未监听props变化，切换帖子时无法重新请求数据 #

ViewPosts由DisplayPosts中的selectedPostId控制渲染，当用户切换不同帖子时，_id props会变化，但componentDidMount仅执行一次，不会重新发起请求。需要添加componentDidUpdate监听props变化。

修复代码：

componentDidUpdate(prevProps) {
    // 当_id props发生变化时，重新请求对应帖子数据
    if (prevProps._id !== this.props._id) {
        axios.get(`http://localhost:6006/api/v1/posts/${this.props._id}`)
              .then(res=> { 
                this.setState({
                    post: {...res.data.data, _id: this.props._id}
                  })
                  console.log('Pulling From::  ', res.data.data)
                 })
              .catch(err => console.log('err::  ', err))
    }
}

3. 渲染时未做空值保护，初始状态会抛出错误 #

初始时this.state.post为null，直接访问this.state.post.title会触发Cannot read properties of null错误，必须先判断数据是否存在再渲染。

修复代码：

render() { 
    // 数据未加载完成时显示加载状态
    if (!this.state.post) {
        return <Box sx={{ flexGrow: 1, p: 3, marginLeft: "300px", marginTop: "-40px" }}>
            <Toolbar />
            <Typography>加载中...</Typography>
        </Box>
    }
    
    return (
        <div> 
        <>
            <Box component="main"
                sx={{ flexGrow: 1, p: 3, marginLeft: "300px", marginTop: "-40px" }}>
                <Toolbar />
                <Typography>
                    <h1>{this.state.post.title} </h1>
                    <p>Added: Today ..........Viewed: -- times </p>
                </Typography>
                <Divider />
                <Stack direction='row' spacing={3}>
                    <Stack
                        direction="column"
                        spacing={2}>
                        <IconButton>
                            <KeyboardDoubleArrowUpIcon color='primary' />
                        </IconButton>
                        <IconButton sx={{ marginTop: '2px' }}>
                            <KeyboardDoubleArrowDownIcon color='primary' />
                        </IconButton>
                    </Stack>
                    <Typography>
                        <h6>  </h6>
                    </Typography>
                    <Typography>
                        <p>
                           {this.state.post.body} 
                        </p>
                    </Typography>
                </Stack>
                <Divider />
                <TextField
                    sx={{ marginTop: "20px", marginLeft: "0px", width: '950px' }}
                    id="filled-multiline-static"
                    label="Enter Answer Here..."
                    multiline
                    rows={8}
                    variant="filled" />

                <Button
                    sx={{ marginTop: "15px" }}
                    variant='contained'
                    size='large'
                    color='primary'
                >
                    Post Your Answer
                </Button>
            </Box>
        </>
    </div>
    )
} 

4. 额外检查：ID字段一致性问题 #

在DisplayPosts的componentDidMount中，你给每个帖子添加了id: key字段，但渲染时用的是post._id作为key和点击参数。需要确认后端返回的帖子ID字段是_id还是id：

• 如果后端返回的帖子对象本身包含_id，那id: key是多余的，可直接简化数据处理：

componentDidMount (){ 
    axios.get('http://localhost:6006/api/v1/posts')
          .then(res=> { 
            this.setState({
                posts: res.data.data
              })
              console.log('Pulling From::  ', res.data.data)
             })
          .catch(err => console.log('err::  ', err))
    } 

内容的提问来源于stack exchange，提问作者airemike