Использование onClick для вызова одной и той же функции работает для одного, а не для другого?

Question

Я создаю приложение, в котором пользователь может искать устройство с помощью панели поиска или просматривать вложенное меню. Когда пользователь находит желаемое устройство, он нажимает на зеленый плюс, чтобы добавить его в свою «сумку». По какой-то причине написанная мной функция addDevice работает только для функции поиска, а не когда она вызывается в меню. Вроде частично работает, но не правильно. Кто-нибудь знает, что в моем коде может быть причиной этого? Пожалуйста, смотрите изображения ниже для более подробной информации.

Я также делаю два разных вызова API, один для панели поиска (вызывается в своей собственной функции) и один для меню (вызывается в componentDidMount). Может ли это быть причиной ошибки?

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

class App extends React.Component {
  state = {
    devices: [],
    bag: [],
    objectKeys: null,
    tempKeys: []
  };

это функция, которая вызывается onClick's

addDevice = (e, deviceTitle) => {
    const array = Array.from(this.state.bag || []);
    if (array.indexOf(deviceTitle) === -1) {
      array.push(deviceTitle);
    } else {
      return;
    }
    localStorage.setItem("list", JSON.stringify(array));
    this.setState({
      bag: array
    });
  };

Эта функция не работает, когда вызывается addDevice

.

makeMenuLayer = layer => {
    const { objectKeys } = this.state;
    if (layer == null) {
      return null;
    }
    const layerKeys = Object.entries(layer).map(([key, value]) => {
{/*If value has children, display an arrow, if not, do nothing*/}      
var arrow = Object.keys(value).length ? (
        <i
          className="fas fa-angle-right"
          style={{ cursor: "pointer", color: "gray" }}
        />
      ) : (
        ""
      );
{/*If value has no children, display an plus sign, if not, do nothing*/}
      var plus =
        Object.keys(value).length === 0 ? (
          <i
            className="fas fa-plus"
            style={{ cursor: "pointer", color: "green" }}
            onClick={e => this.addDevice(e, this.value)}
          />
        ) : (
          ""
        );
      return (
        <ul key={key}>
          <div onClick={() => this.handleShowMore(key)}>
            {key} {arrow} {plus}
          </div>

          {objectKeys[key] && this.makeMenuLayer(value)}
        </ul>
      );
    });
    return <div>{layerKeys}</div>;
  };

это то, где addDevice, который работает, называется

render () {
   return(
            <div className="search-results">
              {(this.state.devices || []).map(device => (
                <a key={device.title}>
                  <li>
                    {device.title}{" "}
                    <i
                      className="fas fa-plus plus input"
                      style={{ cursor: "pointer", color: "green" }}
                      onClick={e => this.addDevice(e, device.title)}
                    />
                  </li>
                </a>
              ))}
            </div>
)}

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

Вот что происходит, когда я пытаюсь добавить "Галстук" из меню. После этого я ничего не могу добавить

Answer 1

В этой строке onClick={e => this.addDevice(e, this.value)} Значение this указывает на сам класс.Таким образом, this.value - это undefined, это не позволяет вам добавлять что-либо еще, потому что undefined уже находится в массиве, а undefined === undefined на самом деле верно.Чтобы это исправить, вам нужно передать правильное значение названия устройства.