Javascript 使用onClick调用同一个函数是为了一件事，而不是另一件事？

我正在创建一个应用程序，用户可以在其中使用搜索栏搜索设备，或查看嵌套菜单。当用户找到他们想要的设备时，他们点击绿色加号将其添加到他们的“包”中。出于某种原因，我编写的

addDevice

函数只适用于搜索函数，在菜单中调用时不起作用。它似乎部分起作用，但不正确。有人知道我的代码中有什么可能导致这种情况吗？有关更多详细信息，请参见下面的图片

我还进行了两个不同的API调用，一个用于搜索栏（在自己的函数中调用），另一个用于菜单（在

componentDidMount

中调用）。这可能是导致错误的原因吗

我不会包含每一行代码，因为它太多了，但是如果您还想看到其他内容，请告诉我

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

这是onClick函数调用的函数

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>;
  };

makeMenuLayer=layer=>{
const{objectKeys}=this.state；
如果（层==null）{
返回null；
}
const layerKeys=Object.entries（layer.map）（[key，value]）=>{
{/*如果值有子项，则显示一个箭头，如果没有，则不执行任何操作*/}
var arrow=对象。键（值）。长度(
) : (
""
);
{/*如果值没有子项，则显示加号，如果没有，则不执行任何操作*/}
var plus=
Object.keys（value）.length==0(
this.addDevice（e，this.value）}
/>
) : (
""
);
返回(

此.handleShowMore（键）}>
{key}{arrow}{plus}
{objectKeys[key]&&this.makeMenuLayer（value）}

);
});
返回{layerKeys}；
};

这是调用执行工作的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>
)}

render（）{
返回(
{（this.state.devices | |[]）.map（device=>(

这是当我尝试从菜单中添加“领带”时发生的情况。它不允许我再添加任何其他内容

在这行
onClick={e=>this.addDevice（e，this.value）}
this
的值指向类本身。因此，
this.value
是
undefined
，它不允许您添加更多内容，因为
undefined
已经在数组中，
undefined==undefined
实际上是真的。
要解决此问题，您需要传递设备标题的正确值。
如果您使用类似JSFIDLE的工具上载导致问题的部分代码，允许其他人复制它，可能会更容易回答。当然！我不知道我怎么会错过这一点，我想把
键
放在
上，而不是
这个值
。非常感谢！！！