首页 > 解决方案 > 推送到 MenuItem 的搜索结果不正确 - React

问题描述

我创建了三个不同的组件,它们根据不同的状态搜索用户,并将这些结果推送到 MenuItem 下拉列表中。搜索功能(下图)是我在第一个组件中为特定用户集设置状态的地方(所有 3 个组件本质上是相同的,但正在搜索不同的用户类型)。

private loadData() {
 const sr = new SearchRequest();
 sr.addFilter("ls_status", "Active");
 searchUsers(this.props.app.api, sr).then((r: SearchResults<User>) => {
  this.setState({
    loanSpecialists: r.results
  });
 });
}

然后我将这些结果映射到菜单项下拉菜单。

   const opts = this.state.loanSpecialists.map(n => (
   <MenuItem key={n.id} value={n.email.replace("@credibilitycapital.com", "")}>
    {n.email.replace("@credibilitycapital.com", "")}
   </MenuItem>
 ));

然后在显示下拉菜单的 TextField 中调用 {opts}。

<TextField
  select
  fullWidth
  variant="outlined"
  value={this.state.assignedLs}
  onChange={this.updateAssignment()}
  margin="normal"
 >
  <MenuItem value="Unassigned">Unassigned</MenuItem>
    {opts}
 </TextField>

但是下拉列表仅在大约 50% 的时间内显示正确的用户。其余时间,它会显示正确的用户以及仅应出现在其他两个下拉列表中的用户。我认为问题来自 searchUsers 函数,因为当我查看开发人员工具中的结果时,res.numHits 和 res.results 在它们应该相同时会有所不同。

搜索结果截图

searchUsers 的 API 路由(db = gorm.DB):

au := lorpAuthenticated.Group("/users")
au.POST("/search", routes.SearchHandler(db, &user.User{}, &[]user.User{}))

SearchHandler 函数:

func SearchHandler(db *gorm.DB, model, results interface{}, filters ...func(c echo.Context, sr *search.SearchRequest)) func(c echo.Context) error {
return func(c echo.Context) error {
    var sr search.SearchRequest

    if err := c.Bind(&sr); err != nil {
        return handleErr(err, "Error binding SearchRequest")
    }

    // Apply filters
    for _, filter := range filters {
        filter(c, &sr)
    }

    if err := sr.ToGorm(db).Find(results).Error; err != nil {
        return handleErr(err, "Error executing search")
    }

    hits, err := sr.ExecuteCount(db, model)
    if err != nil {
        return handleErr(err, "Error executing count")
    }

    return c.JSON(http.StatusOK, struct {
        Results interface{} `json:"results"`
        NumHits int         `json:"numHits"`
    }{
        Results: results,
        NumHits: hits,
    })
 }
}

我已经尝试调试这个一个多星期了,我正在失去理智——任何帮助都将不胜感激。

标签: reactjs

解决方案


推荐阅读