Question

我正在从后端获取数据，并将数据传递给Product.js。但是卡不来了，只有搜索栏来了。我可以使用console.log(this.state.products);在控制台中查看数据。进口货在那里。这是我的Products.js文件内容。

import Product from "./Product";

class Products extends Component {
  constructor() {
    super();
    this.state = {
      products: [],
      searchString: ""
    };
  }

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

  render() {
    return (
      <div>
        {this.state.products ? (
          <div>
            <TextField
              style={{ padding: 24 }}
              id="searchInput"
              placeholder="Search for products"
              margin="normal"
              onChange={this.onSearchInputChange}
            />
            <Grid container spacing={24} style={{ padding: 24 }}>
              {this.state.products.map(currentProduct => (
                <Grid item xs={12} sm={6} lg={4} xl={3}>
                  <Product products={currentProduct} />
                </Grid>
              ))}
            </Grid>
          </div>
        ) : (
          "No products found"
        )}
      </div>
    );
  }
}

export default Products;

这是我的Product.js文件内容。

const Product = props => {
  return (
    <div>
      {props.product ? (
        <Card>
          <CardContent>
            <Typography gutterBottom variant="headline" component="h2">
              {props.product.fields.title}
            </Typography>
            <Typography component="p">{props.product.fields.id}</Typography>
          </CardContent>
        </Card>
      ) : null}
    </div>
  );
};

export default Product;

Answer 1

是错字。它的props.producs，而不是props.product。您正在将products作为对Product组件的支持，但以props.product的身份访问，因此您需要使用props.products访问它。尝试以下更正的代码

const Product = (props) => {
    return(
        <div>
          { props.products ? (
                <Card>
                    <CardContent>
                        <Typography gutterBottom variant="headline" component="h2">
                            {props.products.title}
                        </Typography>
                        <Typography component="p">
                            {props.products.id}
                        </Typography>
                    </CardContent>
                </Card>
          ): null }  
        </div>
    )
}
export default Product;

此外，当您执行.map或.forEach或for循环时，还应将唯一ID作为键添加到循环内父jsx元素中。在您的代码中，您需要添加以下唯一代码

如果每个currentProduct都有唯一的ID，请执行此操作

   { this.state.products.map(currentProduct => (
          <Grid key={currentProduct.id} item xs={12} sm={6} lg={4} xl={3}>
                <Product products={currentProduct} />
          </Grid>
   ))}

否则将索引添加为键，如下所示：

   { this.state.products.map((currentProduct, index) => (
          <Grid key={`Key_${index}`} item xs={12} sm={6} lg={4} xl={3}>
                <Product products={currentProduct} />
          </Grid>
   ))}

看不到卡

1 个答案: