Реагируйте на ошибку автоматического бросания при нажатии на предложения - PullRequest
0 голосов
/ 17 марта 2020

Я использую React-autosuggest в своем коде, но проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда я кликаю по любому предложению, я получаю сообщение об ошибке

Uncaught TypeError: Невозможно прочитать свойство 'trim' из неопределенного

Вот мой код

var subjectsToBeSearched= []

const getSuggestions = value => {
  const inputValue = value.trim().toLowerCase();
  const inputLength = inputValue.length;

  return inputLength === 0
    ? []
    :subjectsToBeSearched.filter(
        lang => lang.name.toLowerCase().slice(0, inputLength) === inputValue
      );
};
const getSuggestionValue = suggestion => suggestion.name;
`
const renderSuggestion = suggestion => <div>{suggestion.name}</div>;

export default class Searchbar extends Component {
  state = {
    language_id: "",
    subjects: [],
    value: "",
    suggestions: []
  };
  onChange = event => {
    this.setState({
      value: event.target.value
    },()=>console.log(this.state.value));
  };
  onSuggestionsFetchRequested = ({ value }) => {
    this.setState({
      suggestions: getSuggestions(value)
    });
  };
  onSuggestionsClearRequested = () => {
    this.setState({
      suggestions: []
    });
  };

  componentWillMount() {
    let languageid = localStorage.getItem("language_id");
    var userdata = window.localStorage.getItem("userdata");

    if (languageid == null) {
      localStorage.setItem("language_id", 0);
    }
    this.setState({ language_id: languageid, userdata: JSON.parse(userdata) });
    this.getAllSubjects();
  }

  getAllSubjects = async () => {
    let details = {
      language_id: this.state.language_id
    };

    this.setState({
      response: fetch("http://18.221.47.207:3000/get_subjects", {
        method: "GET",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          "Cache-Control": "max-age=31536000"
        }
      })
        .then(response => response.json())
        .then(responseJson => {
          this.setState(
            {
              subjects: responseJson
            },
            () => {
              let subjectsToBeFind = this.state.subjects.map(item => {
                return { id: item.subject_id, name: item.subject_name };
              });
              subjectsToBeSearched=subjectsToBeFind
            }
          );
        })
        .catch(error => {
          this.setState({
            loading: false
          });
          swal("Warning!", "Check your network!", "warning");
          console.log(error);
        })
    });
  };

  render() {
    const { value, suggestions } = this.state;
    const inputProps = {
      value,
      onChange: this.onChange
    };

    return (
      <div className={`${styles.InputHeaderSearchDiv} `}>
        <Autosuggest 
           inputProps={inputProps}
          className={`${styles.InputHeaderSearch}`}
          suggestions={suggestions}
          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
        //   alwaysRenderSuggestions={true} 
          getSuggestionValue={getSuggestionValue}
          renderSuggestion={renderSuggestion}
        />
        <div className={`${styles.SearchIcon}`}>
          <img src={SearchIcon} alt="search" />
        </div>
      </div>
    );
  }
}

Поэтому, когда я нажимаю на любое предложение, мне просто нужно утешить и сделать некоторые вещи, но сразу же выдает ошибку

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...