searchWords.filter не является функцией

Question

• Я использую пакет response-highlight-words для выделения текста, введенного в текстовое поле
• Я сослался на документацию о реагирующих на это словах так, что они передают searchWords как массив. https://www.npmjs.com/package/react-highlight-words
• но проблема в том, что когда я передаю ему массив let searchBarText = []; я сталкиваюсь с ошибкой searchWords.filter не является функцией.
• Можете ли вы сказать мне, как это исправить, чтобы в будущем я исправил это сам.
• Предоставление моей песочницы и фрагмента кода ниже.

https://codesandbox.io/s/00nm6k8orp

class SearchBar extends React.Component {
  constructor() {
    super();
    this.state = {
      // testHighlight: {}
      testHighlight: []
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    console.log(e.target.value); // your search bar text
    let object = document.getElementById("myDiv");
    console.log(object.textContent); // your div text

    // now that you have the two strings you can do your search in your favorite way, for example:
    let searchBarText = [];
    searchBarText = e.target.value;
    console.log("searchBarText --->", searchBarText);

    let divText = object.textContent;
    console.log("divText --->", divText);

    if (divText.includes(searchBarText)) {
      console.log("the div text contains your search text");
    } else {
      console.log("the div text doesn't contain search text");
    }

    // this.setState({ testHighlight: response.data });

    this.setState({ testHighlight: searchBarText });
  }

  render() {
    return (
      <div>
        <input
          type="text"
          className="input"
          onChange={this.handleChange}
          placeholder="Search..."
          // highlightText={this.handleChange}
          testHighlight={this.state.testHighlight}
        />

        <HighlighterImplementation testHighlight={this.state.testHighlight} />
      </div>
    );
  }
}

Answer 1

Ваше состояние 'testHighlight' сохраняется в виде строки, а компоненту 'HighlighterImplementation' требуется 'testHighlight' в виде массива.

Итак, устанавливая состояние как пропеллер, вы должны изменить это состояние в массиве. Метод split () может изменить строку на массив строк.

Вы добавили начальное состояние searchBarText, но в событии on change оно обновляется как строка;

this.setState({ testHighlight: searchBarText });

Итак, если вы измените вышеприведенную строку на:

<HighlighterImplementation testHighlight={this.state.testHighlight.split('')} />

и при инициализации состояния это должна быть строка, которая добьется цели

Answer 2

В файле SearchBar.js вы обновляете testHighlight до строки:

this.setState({ testHighlight: searchBarText });

Разве ты не хотел делать:

 this.setState({ testHighlight: [searchBarText] });

Или, если вы хотите добавить его в существующий массив:

this.setState({ testHighlight: [...this.state.testHighlight, searchBarText] });