«ПОИСК» не дает требуемого результата искомого значения — REACTJS, mongodb, nodejs

#javascript #node.js #reactjs #mongodb #express

Вопрос:

У меня есть таблица , содержащая Title , Sub-Title и Count . sub-title является дитем title .Итак, в коллекции title , objectId оф sub-title сохранен.

Ниже приведен скриншот таблицы.введите описание изображения здесь

Если я попытаюсь выполнить поиск по определенному названию, скажем, Фрукты, я получу таблицу, в которой названиеФрукты.

введите описание изображения здесь

Теперь предположим, что я пытаюсь выполнить поиск с подзаголовком и выполнить поиск по apple, я не получаю результат, содержащий только apple или любую строку, в которой присутствует apple. Вместо этого я получаю все данные этого заголовка вместе с данными поиска.

введите описание изображения здесь

введите описание изображения здесь

Below is the code:

titleSubTitle.js

 class titleSubTitle extends Component {
  constructor() {
    super();
    this.state = { title: "", subtitle: "", filter: {} };
  }
  fetch = () => {
    let subtitle = [];
    let subtitleIds = [];
    this.props.data.map((title) => {
      subtitle.push(
        title.children.find((subtitle) =>
          subtitle.name.includes(this.state.subtitle)
        )
      );
    });
    subtitle.forEach((element) => {
      if (element amp;amp; element._id) {
        subtitleIds.push(element._id);
      }
    });

    let data = {
      title: this.state.title,
      subtitle: subtitleIds,
    };
    this.filteringData(data);
  };

  filteringData = async (data) => {
    await this.setState({ filter: data });
    this.getData();
  };

  getData = async () => {
    let data = {
      data: {
        title:
          this.state.filter amp;amp; this.state.filter.title
            ? this.state.filter.title
            : null,
        subtitle:
          this.state.filter amp;amp; this.state.filter.subtitle
            ? this.state.filter.subtitle
            : null,
      },
    };
    await this.props.getSequence(data);
  };

    handleFilterChange = (event) => {
      this.setState({ [event.target.name]: event.target.value });
  }

  render() {
    return (
      
        <TextField
          label="Title"
          value={this.state.title}
          onChange={this.handleFilterChange}
        />
        <TextField
          label="Sub-Title"
          value={this.state.subtitle}
          onChange={this.handleFilterChange}
        />
        <Button type="submit" onClick={this.fetch}>
          Search
        </Button>
      </>
    );
  }
}
 

Ниже приведен исходный код:

 getSequence: async function (req, res) {
    try {
        let query = {
            type: 'Title'
        };
        if (req.query.title) {
            query.titlename = new RegExp(req.query.title, 'i')
        }
        if (req.query.subtitle) {
            query.subtitlename = { $in: req.query.subtitle }
        }
        let sequence= await titlesubtitle.find(query);    
        let dataList = await titlesubtitle.find(query);

        let count = await titlesubtitle.find(query).countDocuments();
        let response = {
            data: sequence,
            totalCount: count,
            dataList : dataList 
        }
        return res.send(response);
    } catch (error){
        return res.send('Error');
    }
}
 

Итак, я еще раз объясню, что я хочу получить в результате.

При поиске подзаголовка скажите apple, я хочу, чтобы в таблице были показаны все записи, в которых присутствует только apple. Никаких дополнительных записей о других подзаголовках не показывается.

При поиске названия в виде фруктов и подзаголовка в виде груши мне нужна только 1 запись, которая очевидна в результате.

Если я ищу запись, которой нет, то таблица должна быть пустой. Это должно относиться ко всем комбинациям.

Я не могу понять, где я ошибаюсь. Кто-нибудь может мне помочь с этим, пожалуйста.

Комментарии:

1. Предоставленный фрагмент кода не содержит определения метода для handleFilterChange . Кроме того, как правило, имя класса должно быть в регистре Pascal, а не в camelCase.

2. имя класса, являющееся camelCase, не является причиной ошибки.

3. И handlefilterchange-это просто обработчик событий, который просто изменяет событие. Это не влияет на код в противном случае @vishwasmeshram

4. handlefilterchange Должно обновляться ваше состояние, которое используется в fetch методе, иначе fetch метод всегда будет содержать пустую строку для this.state.subtitle .

5. ДА. Отредактировали вопрос