Javascript 搜索功能不适用于前端

我正在使用postman从后端获取数据。但是，当我使用前端进行同样的操作时，它不起作用。我会犯这样的错误 1.TypeError:无法读取null的属性“map” 2.未处理的拒绝（TypeError）：无法读取null的属性“map”

我想，我得到这个错误是因为当我搜索时，卡无法呈现。后端数据是以数组的形式出现的

constyles=theme=>({
appBar：{
位置：'相对'，
},
图标：{
marginRight:theme.space.unit*2，
},
布局：{
宽度：“自动”，
marginLeft:theme.space.unit*3，
marginRight:theme.space.unit*3，
[theme.breakpoints.up（1100+theme.spacing.unit*3*2）]：{
宽度：1100，
marginLeft:'自动'，
marginRight:“自动”，
},
},
cardGrid：{
填充：`${theme.spating.unit*8}px 0`，
},
卡片：{
高度：“100%”，
显示：“flex”，
flexDirection:'列'，
},
卡片内容：{
flexGrow:1，
},
});
类产品扩展组件{
建造师（道具）{
超级（道具）；
此.state={
产品：[]，
搜索字符串：“”
};
this.onSearchInputChange=this.onSearchInputChange.bind（this）；
this.getProducts=this.getProducts.bind（this）；
}
componentDidMount（）{
这个.getProducts（）；
}
//删除=id=>{
//轴心柱http://localhost:9022/products/delete/“+id）
//。然后（res=>{
//让updatedProducts=[…this.state.products].filter（i=>i.id！==id）；
//this.setState（{products:updatedProducts}）；
//     });
// }
删除=id=>{
轴心柱http://localhost:9022/products/delete/“+id）
。然后（res=>{
this.setState（（prevState，prevProps）=>{
让updatedProducts=[…prevState.products].filter（i=>i.id！==id）；
返回({
产品：更新产品
});
});
});
}
getProducts（）{
axios.get（）http://localhost:9022/products/getAll')
。然后（res=>{
this.setState（{products:res.data}，（）=>{
console.log（this.state.products）；
});
});
}
onSearchInputChange=（事件）=>{
让newSearchString=''；
if（event.target.value）{
newSearchString=event.target.value；
}
axios.get（）http://localhost:9022/products/getproducts“+新闻搜索字符串）
。然后（res=>{
this.setState（{products:res.data}）；
console.log（this.state.products）；
});
这个.getProducts（）；
}
//onSearchInputChange（事件）{
//让newSearchString=''；
//if（event.target.value）{
//newSearchString=event.target.value；
//   }
////使用回调完成状态更新后调用getProducts（第二个参数）
//this.setState（{searchString:newSearchString}，（）=>{
//这个.getProducts（）；
//   });
// }
render（）{
const{classes}=this.props；
返回(
{this.state.products.map（currentProduct=>(
{currentProduct.title}
{currentProduct.price}
编辑
this.delete（currentProduct.id）}>
删除
))}
)
}
}
Products.propTypes={
类：PropTypes.object.isRequired，
};
导出默认样式（样式）（产品）；

据观察，您在

getproducts

中添加了错误的URL，URL中缺少斜杠。请在下面查找详细信息：

render() {
    const { classes } = this.props;
    return (
      <React.Fragment>
        <TextField style={{ padding: 24 }}
          id="searchInput"
          placeholder="Search for products"
          margin="normal"
          onChange={this.onSearchInputChange} />
        <CssBaseline />
        <main>
          <div className={classNames(classes.layout, classes.cardGrid)}>
            <Grid container spacing={40}>
              {this.state.products && this.state.products.map(currentProduct => (
                <Grid item key={currentProduct.id} sm={6} md={4} lg={3}>
                  <Card className={classes.card}>

                    <CardContent className={classes.cardContent}>
                      <Typography gutterBottom variant="h5" component="h2">
                        {currentProduct.title}
                      </Typography>
                      <Typography>
                        {currentProduct.price}
                      </Typography>
                    </CardContent>
                    <CardActions>

                      <Button size="small" color="primary" component={Link} to={"/products/" + currentProduct.id}>
                        Edit
                    </Button>
                      <Button size="small" color="primary" onClick={() => this.delete(currentProduct.id)}>
                        Delete
                    </Button>
                    </CardActions>
                  </Card>
                </Grid>
              ))}
            </Grid>
          </div>
        </main>
      </React.Fragment>
    )
}

如果搜索字符串是r，那么您使用的是getproducts的URL:

http://localhost:9022/products/getproductsr

这是错误的，应该是

http://localhost:9022/products/getproducts/r

因此，您必须按如下方式更改检索产品的代码：

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

此外，最好为this.state.products提供未定义/null的检查，然后呈现组件，因为如果提供了错误的URL且未定义为axios请求是异步的，则产品可能为null。因此，通过在现有渲染代码中添加“this.state.products&&”，可以很好地避免此类问题。我已经更新了您的渲染功能，请在下面找到：

render() {
    const { classes } = this.props;
    return (
      <React.Fragment>
        <TextField style={{ padding: 24 }}
          id="searchInput"
          placeholder="Search for products"
          margin="normal"
          onChange={this.onSearchInputChange} />
        <CssBaseline />
        <main>
          <div className={classNames(classes.layout, classes.cardGrid)}>
            <Grid container spacing={40}>
              {this.state.products && this.state.products.map(currentProduct => (
                <Grid item key={currentProduct.id} sm={6} md={4} lg={3}>
                  <Card className={classes.card}>

                    <CardContent className={classes.cardContent}>
                      <Typography gutterBottom variant="h5" component="h2">
                        {currentProduct.title}
                      </Typography>
                      <Typography>
                        {currentProduct.price}
                      </Typography>
                    </CardContent>
                    <CardActions>

                      <Button size="small" color="primary" component={Link} to={"/products/" + currentProduct.id}>
                        Edit
                    </Button>
                      <Button size="small" color="primary" onClick={() => this.delete(currentProduct.id)}>
                        Delete
                    </Button>
                    </CardActions>
                  </Card>
                </Grid>
              ))}
            </Grid>
          </div>
        </main>
      </React.Fragment>
    )
}

render（）{
const{classes}=this.props；
返回(
{this.state.products&&this.state.products.map（currentProduct=>(
{currentProduct.title}
{currentProduct.price}
编辑
this.delete（currentProduct.id）}>
删除
))}
)
}

---

希望对您有所帮助。

据观察，您在

getproducts

中添加了错误的URL，URL中缺少斜杠。请在下面查找详细信息：

render() {
    const { classes } = this.props;
    return (
      <React.Fragment>
        <TextField style={{ padding: 24 }}
          id="searchInput"
          placeholder="Search for products"
          margin="normal"
          onChange={this.onSearchInputChange} />
        <CssBaseline />
        <main>
          <div className={classNames(classes.layout, classes.cardGrid)}>
            <Grid container spacing={40}>
              {this.state.products && this.state.products.map(currentProduct => (
                <Grid item key={currentProduct.id} sm={6} md={4} lg={3}>
                  <Card className={classes.card}>

                    <CardContent className={classes.cardContent}>
                      <Typography gutterBottom variant="h5" component="h2">
                        {currentProduct.title}
                      </Typography>
                      <Typography>
                        {currentProduct.price}
                      </Typography>
                    </CardContent>
                    <CardActions>

                      <Button size="small" color="primary" component={Link} to={"/products/" + currentProduct.id}>
                        Edit
                    </Button>
                      <Button size="small" color="primary" onClick={() => this.delete(currentProduct.id)}>
                        Delete
                    </Button>
                    </CardActions>
                  </Card>
                </Grid>
              ))}
            </Grid>
          </div>
        </main>
      </React.Fragment>
    )
}

如果搜索字符串是r，那么您使用的是getproducts的URL:

http://localhost:9022/products/getproductsr

这是错误的，应该是

http://localhost:9022/products/getproducts/r

因此，您必须按如下方式更改检索产品的代码：

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

这也会很好