如何使用localStorage.removeItem从数组中删除项目？

Question

我正在使用localStorage.setItem并localStorage.getItem存储来自API的数据（以我的情况为设备），以通过页面重置保持状态。单击设备后，它将存储在购物袋中。当用户单击包装袋中的设备时，我希望它能够“删除”并从本地存储中删除。现在它可以正常工作，以便在UI上显示它已被删除，但是当页面刷新时它又回来了，因为它仍在localStorage中。

我尝试localStorage.removeItem(deviceTitle)在removeDevice函数中使用它，但是它似乎没有任何作用。这是因为我有localStorage.getItem在componentDidMount？如果是这样，我该如何进行更改以使该removeItem功能正常工作？

addDevice() 是在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

    });

  };

这是应该从本地存储中删除设备的位置

removeDevice = (e, deviceTitle) => {

    this.setState(prevState => ({

      bag: prevState.bag.filter(d => d !== deviceTitle)

    }));

    localStorage.removeItem(deviceTitle);

  };

这是存储设备的我的componentDidMount（）

componentDidMount() {

    this.search("");

    const storedList = JSON.parse(localStorage.getItem("list"));

    console.log(storedList);

    const bag = storedList;

    this.setState({ bag });

  }

编辑下面添加的更多代码：

  render() {

    return (

      <div>

        <form>

          <input

            type="text"

            placeholder="Search for devices..."

            onChange={this.onChange}

          />

          {this.state.devices.map(device => (

            <ul key={device.title}>

              <p>

                {device.title}{" "}

                <i

                  className="fas fa-plus"

                  style={{ cursor: "pointer", color: "green" }}

                  onClick={e => this.addDevice(e, device.title)}

                />

              </p>

            </ul>

          ))}

以下是其外观的屏幕截图： 本地存储中的 项目，在UI中删除后的项目， 但是当我重置页面时，由于未从localStorage删除设备，它会恢复为第一张图像

Answer 1

删除项目本身后，只需更换阵列removeDevice = (e, deviceTitle) => {&nbsp; &nbsp; this.setState(prevState => ({&nbsp; &nbsp; &nbsp; bag: prevState.bag.filter(d => d !== deviceTitle)&nbsp; &nbsp; }));&nbsp; &nbsp; // actual localStorage item removing&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; let devicesArray&nbsp; = JSON.parse(localStorage.getItem("list"))&nbsp; &nbsp; &nbsp; &nbsp; devicesArray.splice(devicesArray.indexOf(deviceTitle), 1)&nbsp; &nbsp; &nbsp; &nbsp; localStorage.setItem("list", JSON.stringify(devicesArray));&nbsp; };因为设置项目，如果它在那里替换它的值检查在这里

Answer 2

由于已经在过滤数据并更新状态，因此可以添加第二个参数作为setState回调。在回调中，您可以从状态中获取更新的包，并将其设置为替换localStorage中的值。你可以这样removeDevice = (e, deviceTitle) => {&nbsp; this.setState(prevState => ({&nbsp; &nbsp; bag: prevState.bag.filter(d => d !== deviceTitle)&nbsp; }), () => {&nbsp; &nbsp; const { bag } = this.state;&nbsp; &nbsp; localStorage.setItem("list", JSON.stringify(bag))&nbsp; });};