Question

我正在从后端获取数据，并且能够使用console.log（this.state.products）在控制台中查看数据。但是我看不到卡中的数据，并且删除功能正在自动调用。如果可能的话，我想在网格中显示卡，并通过调用不同的功能（例如，edit选项将调用edit（id）方法，而delete将调用delete方法）来显示选项。进口货在那里。这是我的Products.js文件内容。

    const styles = theme => ({
        root: {
          flexGrow: 1,
        },
        paper: {
          padding: theme.spacing.unit * 2,
          textAlign: 'center',
          color: theme.palette.text.secondary,
        },
        card: {
            maxWidth: 400,
          },
          media: {
            height: 0,
            paddingTop: '56.25%', // 16:9
          },
          actions: {
            display: 'flex',
          },
      });

      const ITEM_HEIGHT = 40;

    class Products extends Component {


        constructor() {
            super();
            this.state = {
                products: [],
                searchString: ''
            };
            this.getProducts()
        }
        state = {
            anchorEl: null,
          };

          handleClick = event => {
            this.setState({ anchorEl: event.currentTarget });
          };

          handleClose = () => {
            this.setState({ anchorEl: null });
          };


         delete(id) {
            alert(id)
            axios.post('http://localhost:9022/test/products/delete/'+id)
              .then(res => {
                let updatedProducts = [...this.state.products].filter(i => i.id !== id);
                this.setState({products: updatedProducts});
              });
          }

        getProducts() {
            axios.get('http://localhost:9022/products/getAll')
                .then(res => {
                    this.setState({ products: res.data });
                    console.log(this.state.products);
                });
        }

        onSearchInputChange = (event) => {
            if (event.target.value) {
                this.setState({searchString: event.target.value})
            } else {
                this.setState({searchString: ''})
            }
            this.getProducts()
        }

        render() {
            const { anchorEl } = this.state;
        const open = Boolean(anchorEl);
            const { classes } = this.props;
            return (
                <div>
                    {this.state.products ? (
                        <div>
                            <TextField style={{ padding: 24 }}
                                id="searchInput"
                                placeholder="Search for products"
                                margin="normal"
                                onChange={this.onSearchInputChange} />
                            {this.state.products.map(currentProduct => (
                                <Card>
                                <CardHeader
                                  action={
                                    <IconButton aria-label="More"
                                    aria-owns={open ? 'long-menu' : null}
                                    aria-haspopup="true"
                                    onClick={this.handleClick}>
                                      <MoreVertIcon />
                                      <Menu
                                  id="long-menu"
                                  anchorEl={anchorEl}
                                  open={open}
                                  onClose={this.handleClose}
                                  PaperProps={{
                                    style: {
                                      maxHeight: ITEM_HEIGHT * 4.5,
                                      width: 100,
                                    },
                                  }}
                                >
                                     <option onClick={this.edit}>Edit</option>
                                     <option onClick={this.delete(this.state.products.id)}>Delete</option>

                                </Menu>
                                    </IconButton>
                                  }
                                  title= {this.state.products.title}
                                />

                                <CardContent>
                                  <Typography component="p">
                                   {this.state.products.id}
                                  </Typography>
                                </CardContent>
                              </Card>
                            ))}
                        </div>
                    ) : "No products found"}
                </div>
            )
        }
    }

    export default  withStyles(styles)(Products);

Answer 1

修复自动调用编辑和删除功能

更改

 <option onClick={this.edit}>Edit</option>
 <option onClick={this.delete(this.state.products.id)}>Delete</option>

收件人

 edit = (id) => {
   consoe.log(id);you will get id here
 }

 delete = id => {
        alert(id)
        axios.post('http://localhost:9022/test/products/delete/'+id)
          .then(res => {
            let updatedProducts = [...this.state.products].filter(i => i.id !== id);
            this.setState({products: updatedProducts});
          });
      }
 <option onClick={() => this.edit(currentProduct.id)}>Edit</option>
 <option onClick={() => this.delete(currentProduct.id)}>Delete</option>

下面的卡中为正确的代码。要访问标题和ID，您需要调用currentProduct.id和currentProduct.title而不是this.state.products.id

也永远不要忘记像我在下面那样向Card元素添加密钥

render(){  
const productsArray = [];
  this.state.products.forEach((currentProduct, index) => {
    if((index+1) % 4 == 0){
      productsArray.push(<div className="row" key={currentProduct.id}>
          <Card>
          <CardHeader action={<IconButton aria-label="More" aria-owns={open ? 'long-menu' : null} aria-haspopup="true" onClick={this.handleClick}>
            <MoreVertIcon />
            <Menu
              id="long-menu"
              anchorEl={anchorEl}
              open={open}
              onClose={this.handleClose}
              PaperProps={{
                style: {
                  maxHeight: ITEM_HEIGHT * 4.5,
                  width: 100,
                },
              }}
            >
               <option onClick={() => this.edit(currentProduct.id)}>Edit</option>
               <option onClick={() => this.delete(currentProduct.id)}>Delete</option>
          </Menu>
          </IconButton>
            }
            title= {currentProduct.title}
          />

          <CardContent>
            <Typography component="p">
             {currentProduct.id}
            </Typography>
          </CardContent>
        </Card>
      </div>)
}else{
  productsArray.push(
    <Card key={currentProduct.id}>
          <CardHeader action={<IconButton aria-label="More" aria-owns={open ? 'long-menu' : null} aria-haspopup="true" onClick={this.handleClick}>
            <MoreVertIcon />
            <Menu
              id="long-menu"
              anchorEl={anchorEl}
              open={open}
              onClose={this.handleClose}
              PaperProps={{
                style: {
                  maxHeight: ITEM_HEIGHT * 4.5,
                  width: 100,
                },
              }}
            >
               <option onClick={() => this.edit(currentProduct.id)}>Edit</option>
               <option onClick={() => this.delete(currentProduct.id)}>Delete</option>
          </Menu>
          </IconButton>
            }
            title= {currentProduct.title}
          />

          <CardContent>
            <Typography component="p">
             {currentProduct.id}
            </Typography>
          </CardContent>
        </Card>
  )
}
       })

  return(
    <div>
      <TextField style={{ padding: 24 }}
          id="searchInput"
          placeholder="Search for products"
          margin="normal"
          onChange={this.onSearchInputChange} />
      {productsArray.length > 0 ? {productsArray} : "No products found"}
    </div>
  )
}

我看不到卡数据

1 个答案: