Как правильно вызывать функцию из onClick, чтобы она не вызывала неправильную? - PullRequest
Новая
       23

Как правильно вызывать функцию из onClick, чтобы она не вызывала неправильную?

0 голосов
/ 11 февраля 2019

Когда я нажимаю на кнопку, onClick запускает правильную функцию, проходит половину и переходит к другой функции, которая не связана с ней, проходит половину и возвращается к первой функции, снова запускает половину впадины и сбрасывает ошибку

Uncaught TypeError: _this.state.searchValue.toLowerCase не является функцией

Интересно то, что я нажимаю другую кнопку, перед которой эта функция запускается с помощью toLowerCase() иошибок нет.

Я понятия не имею, что здесь происходит, но до сих пор я пытался удалить несколько строк, чтобы увидеть, какая строка вызывает это, потому что я не думаю, что строка с toLowerCase() действительно является причиной,Все работает, когда я удаляю строки, где сначала this.setState.

Вот моя функция: (Предупреждения используются для отслеживания, где находится функция, как я знаю, что она работает только наполовину. Она никогда не достигает alert("DDD"). Эта функция вызывается кнопкой onClick, как и должно быть) 

  onSelect = (e) => {
    const data = e.target.getAttribute('data-id');
    const itemId = e.target.getAttribute('data-id');
    const itemIdState = !this.state[e.target.getAttribute('data-id')];
    alert("AAA")

    this.setState(state => {  // <--- Somehow problem comes from this setState function
      const newState = {};
      for (const dataId in state) {
        newState[dataId] = dataId === data
      }
      alert("BBB")
      return newState
    });
    alert("CCC")

    this.setState(State => ({
      [itemId]: itemIdState,
    }), function() {
      alert("DDD")
      if(this.state[itemId] === true){
       this.setState({isAnySelected: true})
     }else if(this.state[itemId] === false){
        this.setState({isAnySelected: false})
      }
    })
  }

Это другая функция, которая срабатывает по ошибке и не связана с другой.Это просто возврат компонента, который отображается, и когда я нажимаю на его кнопку, у меня возникает эта проблема. 

  filterSearch = (id, title, path) => {
    let name = title.toLowerCase()
    let filter = this.state.searchValue.toLowerCase()
    if(name.includes(filter)){
      return <SearchResult key={id} data-id={id} pName={path} onClick={this.onSelect} selected={this.state[id]} />
    }
  }

А вот откуда запускается filterSearch.За this.props.searchResult стоит Redux. 

    {this.props.searchResult ? this.props.searchResult.map(category =>
      this.filterSearch(category.id, category.title, category.path)
     ) : null
    }

Ответы [ 2 ]

0 голосов
/ 12 февраля 2019

Мне кажется, я вижу, в чем проблема: в вашем проблемном this.setState вы приводите все в своем состоянии к логическому значению: 

this.setState(state => {
  const newState = {};
  for (const dataId in state) {
    newState[dataId] = dataId === data
  }
  alert("BBB")
  return newState
});

Ваше for() выражение заканчивается сравнением searchValue сdata (какой-то идентификатор), который я представляю чаще, чем не будет , а не , так что searchValue в итоге будет установлен на false.

И чтопроисходит, когда вы пытаетесь выполнить .toLowerCase() для логического значения?

toLowerCase doesn't exist on Booleans

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

this.state = {
  searchValue: '',
  ids: {},
};

Затем замените ваш проблемный this.setState на что-то вроде этого: 

this.setState((state) => {
  const newIDs = {
    // Create a clone of your current IDs
    ...state.ids,
  };

  Object.keys(newIDs).forEach(key => {
    newIDs[key] = key === data
  });

  alert("BBB")

  return {
    // searchValue will remain untouched
    ...state,
    // Only update your IDs
    ids: newIDs,
  }
});
0 голосов
/ 12 февраля 2019

Что именно вы хотите здесь сделать? 

this.setState(state => {
  const newState = {}; // You are initializing an object
  for (const dataId in state) {
    newState[dataId] = dataId === data // You are putting in an array every property of state that is equal to data
  }
  return newState
});

Так что безвозвратно ваше свойство this.state.searchValue будет изменено на что-то еще, что имеет логический тип.Таким образом, toLowerCase как функция для string.prototype, вы получите ошибку.

Вы должны описать то, что вы хотели получить здесь.

...