我正在建立一个论坛，我想让它在：一旦你点击标题，它会显示一个页面（我已经创建好了），显示文章标题，然后是文章正文。我也使用MUI来构建页面。但是，当我调用后端并将“this.state.props.”附加到末尾时，Axios调用失败。
我的“所有问题”页面代码，其中用户选择打开哪个帖子：

export default class DisplayPosts extends Component { 
       constructor(props) {
            super(props);
            this.state = {
                posts: [],
                selectedPostId: null,
            };
       }
       componentDidMount (){ 
        axios.get('http://localhost:6006/api/v1/posts')
              .then(res=> { 
                const posts = [];
                for (let key in res.data.data) {
                    posts.push({...res.data.data[key], id: key});
                }
                this.setState({
                    posts: posts,
                  })
                  console.log('Pulling From::  ', res.data.data)
                 })
              .catch(err => console.log('err::  ', err)
              )
        } 

        onPostClickHandler = (_id) => {
            this.setState({
                selectedPostId: _id,
            })
            console.log(_id)
        } 

render() { 
    const posts = this.state.posts.map((post) => {
        return <Posts 
                key ={post._id} 
                post={post}
                postclicked = {this.onPostClickHandler.bind(
                    this,
                    post._id, 
                )} />;
    })
    return (
        <Box component="main" 
        sx={{ flexGrow: 1, p: 3, marginLeft: "300px",marginTop:"-40px" }}>
            <Toolbar />
            <Stack spacing={2}> 
                <Typography> 
                   <h1> All Questions </h1> 
                </Typography>
                <Button
                sx={{}}
                variant = 'outlined'
                size = 'medium'
                color = 'secondary'>
                    Ask New Question
                </Button>
                <Divider /> 
                    <div> 
                    {posts}
                    </div> 
            </Stack>
            {this.state.selectedPostId && ( 
                <ViewPosts _id={this.state.selectedPostId} />
            )}
        </Box> 
    )
}
}

我的“查看帖子”页面，用户将在该页面上看到他们刚刚单击的帖子的信息

export default class ViewPosts extends Component {  
    constructor(props){
        super(props);
        this.state = { 
            post: null,
        }
    }
componentDidMount (){ 
        axios.get(`http://localhost:6006/api/v1/posts/${this.props._id}`)
              .then(res=> { 
                this.setState({
                    posts: {...res.data.data, _id: this.props._id}
                  })
                  console.log('Pulling From::  ', res.data.data)
                 })
              .catch(err => console.log('err::  ', err)
              )
        } 
render() { 
    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>
    )
    } 
}