Javascript 我想在react with class component中使用模态组件，但状态似乎没有更新。需要指导我的帮助）

问题：存储从数据库获取项目，主组件使用简短信息呈现这些项目。单击“我想打开模态组件”，其中包含有关此产品的详细信息。 我的想法->创建变量，我将在其中存储有关

selectedItem

->创建允许显示模态组件的变量的信息。也就是说，它首先将信息写入

selectedItem

，然后用props将这个变量传递给模态组件，我们发出命令，用

openmodel

呈现这个组件。但我遇到的问题是

openmodelaction

setState似乎不起作用。它根本不会改变状态。我记得setState是异步的，但是在this.setState中写入this.setState没有帮助，而且看起来很奇怪。不管怎么说，它说的主要问题是道具得到的物品是未定义的

我是否应该尝试使用功能组件进行测试，它是否会产生任何差异？我做模态窗口的逻辑正确吗？你会怎么做

我有一个非常简单的任务，就像我在Vue上做过很多次一样，没有任何问题，但React每天都让我发疯。但说实话，我开始喜欢react，在他的帮助下，我对Vue更为了解，比如说react向我展示了Vue如何在引擎盖下工作

import React from 'react'
import { withStyles } from '@material-ui/styles';

import { Typography } from '@material-ui/core'
import Button from '@material-ui/core/Button';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Grid from '@material-ui/core/Grid'

import {inject, observer} from 'mobx-react'

import ItemModal from '@components/main/modalItem'

const useStyles = {
    media:{
        height: "145px"
    },
    modal: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    }
}

let Main = inject("store")(observer(class Main extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            selectedItem: {},
            openModal: false
        }
    }

    openModalAction = (el) => {
        this.setState({
            selectedItem: el,
            openModal: true
        })
    }

    closeModalAction = () => {
        this.setState({
            selectedItem: {},
            openModal: false
        })
    }

    modalComponent = () => {
        if(this.state.openModal)
            return (<ItemModal item = {this.selectedItem} />)
    }

    render(){
        const { classes } = this.props;
        let productModel = this.props.store.products; // gettting products instance from Mobx Store
        let productsDom = productModel.getAll.map((el, i) => { // making DOM
            return (
                <Grid item xs={3} key={i}>
                    <Card>
                    <CardContent>
                        <Typography variant="h4">{el.title}</Typography>
                        <Typography variant="subtitle1">{el.price}</Typography>
                    </CardContent>
                    <CardActions>
                        <Button color="secondary" onClick={ () => this.openModalAction(el) }>Quick look</Button>
                        <Button color="primary">Add to cart</Button>
                    </CardActions>
                 </Card>
            </Grid>)
        })

        return (

            <React.Fragment>
                {/*Modal item*/}
                { this.modalComponent() }

              
                {/*Items for sale*/}

                <div>
                 <Typography variant="h3" align="center" gutterBottom> Items </Typography>
                   <Grid container spacing={3}>
                            { productsDom }
                   </Grid>
                </div>
                </div>

            </React.Fragment>
        )
    }

}))

export default  withStyles(useStyles)(Main);

从“React”导入React
从'@material ui/styles'导入{withStyles}；
从“@material ui/core”导入{排版}
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Card”导入卡片；
从“@material ui/core/CardActions”导入CardActions；
从“@material ui/core/CardContent”导入CardContent；
从“@material ui/core/CardMedia”导入CardMedia；
从“@material ui/core/Grid”导入网格
从“mobx react”导入{inject，observer}
从“@components/main/modalItem”导入ItemModal
常量useStyles={
媒体：{
高度：“145px”
},
模态：{
显示：“flex”，
对齐项目：“居中”，
为内容辩护：“中心”，
}
}
让Main=inject（“store”）（观察者）（类Main扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
选择编辑项：{}，
OpenModel:错误
}
}
openModalAction=（el）=>{
这是我的国家({
selectedItem:el，
OpenModel：正确
})
}
closeModalAction=（）=>{
这是我的国家({
选择编辑项：{}，
OpenModel:错误
})
}
modalComponent=（）=>{
if（this.state.openmodel）
返回（）
}
render（）{
const{classes}=this.props；
让productModel=this.props.store.products；//从Mobx商店获取产品实例
让productsDom=productModel.getAll.map（（el，i）=>{//DOM
返回(
{el.title}
{el.price}
这个.openModalAction（el）}>快速查看
添加到购物车
)
})
返回(
{/*模态项*/}
{this.modalComponent（）}
{/*待售物品*/}
项目
{productsDom}
)
}
}))
导出默认样式（useStyles）（主）；

这是模态分量

import React from "react"
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import { Typography } from "@material-ui/core";
import {withStyles} from "@material-ui/styles";
import PropType from 'prop-types'

import Grid from '@material-ui/core/Grid'
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

class ModalItem extends React.Component{

    render(){
        const { classes } = this.props;
        let item = this.props.item;

        return(
            <Card>
                <CardContent>
                    <Grid container>
                        <Grid item xs={6}>

                        </Grid>
                        <Grid item xs={6}>
                            <Typography variant="h3">{item.title}</Typography>
                            <Typography variant="subtitle1">{item.price}</Typography>
                            <Grid container item xs={12}>
                                <Grid item xs={6}>
                                    <TextField
                                    type="number"/>
                                </Grid>
                                <Grid item xs={6}>
                                    <Button color="primary">Add to cart</Button>
                                </Grid>
                            </Grid>
                            <Typography variant="subtitle2">Category</Typography>
                            <Button>Full review</Button>
                        </Grid>
                    </Grid>
                </CardContent>
            </Card>
        )
    }
}

ModalItem.propTypes = {
    item: PropType.object
}

export default  withStyles(useStyles)(ModalItem);

从“React”导入React
从“@物料界面/核心/卡片”导入卡片；
从“@material ui/core/CardContent”导入CardContent；
从“@material ui/core”导入{排版}；
从“@material ui/styles”导入{withStyles}”；
从“道具类型”导入道具类型
从“@material ui/core/Grid”导入网格
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/Button”导入按钮；
类ModalItem扩展了React.Component{
render（）{
const{classes}=this.props；
让item=this.props.item；
返回(
{item.title}
{item.price}
添加到购物车
类别
全面审查
)
}
}
ModalItem.propTypes={
项目：PropType.object
}
导出默认样式（useStyles）（ModalItem）；

你就快到了！对我有效，我没有测试商店

const useStyles = {
    media:{
        height: "145px"
    },
    modal: { // remove modal from here to put in the right file ->ModalItem
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    }
}

let Main = inject("store")(observer(class Main extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            selectedItem: {},
            openModal: false
        }
    }

    openModalAction = (el) => {
        this.setState({
            selectedItem: el,
            openModal: true
        })
    }

    closeModalAction = () => {
        this.setState({
            selectedItem: {},
            openModal: false
        })
    }


    render(){
        const { classes } = this.props;
        let productModel = this.props.store.products; // gettting products instance from Mobx Store
        })

        return (

            <React.Fragment>
                {/*Modal item*/}
                { this.state.openModal && // use && operator
                  <ModalItem item={this.state.selectedItem} /> // change to ModalItem, remove space and add .state
                }

              
                {/*Items for sale*/}

                <div>
                 <Typography variant="h3" align="center" gutterBottom> Items </Typography>
                   <Grid container spacing={3}>
                       {productModel.getAll().map((el, i) => (  //maybe getAll()
                        <Grid item xs={3} key={i}>
                         <Card>
                          <CardContent>
                           <Typography variant="h4">{el.title}</Typography>
                           <Typography variant="subtitle1">{el.price}</Typography>
                          </CardContent>
                          <CardActions>
                           <Button color="secondary" onClick={ () => this.openModalAction(el) }>Quick look</Button>
                           <Button color="primary">Add to cart</Button>
                          </CardActions>
                         </Card>
                        </Grid>
                       ))}
                   </Grid>
                </div>
                /*</div>*/ //remove this

            </React.Fragment>
        )
    }

}))

const useStyles={
媒体：{
高度：“145px”
},
模态：{//从这里删除模态以放入正确的文件->模态项
显示：“flex”，
对齐项目：“居中”，
为内容辩护：“中心”，
}
}
让Main=inject（“store”）（观察者）（类Main扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
选择编辑项：{}，
OpenModel:错误
}
}
openModalAction=（el）=>{
这是我的国家({
selectedItem:el，
OpenModel：正确
})
}
closeModalAction=（）=>{
这是我的国家({
选择编辑项：{}，
OpenModel:错误
})
}
render（）{
const{classes}=this.props；
让productModel=this.props.store.products；//从Mobx商店获取产品实例
})
返回(
{/*Moda
const useStyles = {
    modal: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    }
}
class ModalItem extends React.Component{

    render(){
        const { classes } = this.props;
        let item = this.props.item;

        return(
            <Card className={classes.modal}>
                <CardContent>
                    <Grid container>
                        <Grid item xs={6}>

                        </Grid>
                        <Grid item xs={6}>
                            <Typography variant="h3">{item.title}</Typography>
                            <Typography variant="subtitle1">{item.price}</Typography>
                            <Grid container item xs={12}>
                                <Grid item xs={6}>
                                    <TextField
                                    type="number"/>
                                </Grid>
                                <Grid item xs={6}>
                                    <Button color="primary">Add to cart</Button>
                                </Grid>
                            </Grid>
                            <Typography variant="subtitle2">Category</Typography>
                            <Button>Full review</Button>
                        </Grid>
                    </Grid>
                </CardContent>
            </Card>
        )
    }
}

ModalItem.propTypes = {
    item: PropType.object
}

export default  withStyles(useStyles)(ModalItem);