Question

我正在创建一个应用程序，用户可以在其中使用搜索栏搜索设备，或者通过嵌套菜单查看。当用户找到所需的设备时，他们单击绿色加号将其添加到“包”中。由于某种原因，我编写的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>;
  };

在这里可以正常工作的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实际上是正确的。要解决此问题，您需要传递正确的设备标题值。

使用onClick调用同一功能仅适用于一件事，而不适用于另一件事？

1 个答案: