React：如何更改地图内切换开关的状态？

Question

我有一个名为 Products 的数组。我在列表页面上显示此产品数据。 products 中的每个产品也有一个名为 isActive 的值。我想通过在列表页面上放置启用/禁用开关来更改这个 isActive 值。我写的代码如下，但是每当我点击切换时，isActive 值总是返回 false。我该怎么办？

constructor() {
    super();
    this.state = {
      products: [],
      isActive: null,
      _id: "",
    };
 }

  componentWillMount() {
    // this.setState({isLoading:true});
    const { _id, isActive } = this.state;
    getProducts()
      .then((response) => {
        if (response.data.success) {
          if (response.data.success.data.products) {
            // console.log(response.data.success.data.products);
            let responseData = response.data.success.data.products;
            this.setState({
              products: responseData,
              isLoading: false,
            });
          }
        }
      })
      .catch((error) => {
        console.log(error);
      });
      
  }

  toggleSwitch(_id) {
    const { isActive } = this.state;

    updateProducts({ _id, isActive })
      .then((response) => {
        // console.log(response.data.success.data);
        if (response.data.success.data) {
          toast.success("State have been successfully updated!");
          this.setState((prevState) => ({
            products: prevState.products.map((product) => ({
              ...product,
              isActive: product._id === _id ? !product.isActive : product.isActive,
            })),
          }));
        } else {
          this.setState({
            isLoading: false,
          });
          toast.error("Unable to change!");
        }
      })
      .catch((error) => {
        toast.error("Server Error");
      });

      console.log(isActive);
  }

render() {
    const { isLoading, products } = this.state;
    return (
      <>
{products != null &&
                      products.map((product, key) => {
                        return (
                          <tr key={key} className="text-center">
                            <td scope="col">{key + 1}</td>
                            <td scope=" col">{product.name}</td>
                            <td scope=" col">
                              {product.minUser} - {product.maxUser}
                            </td>
                            <td scope=" col">
                              {/* {product._id} */}
                              {/* {product.isActive.toString()} */}
                              <Switch
                                onChange={() => this.toggleSwitch(product._id)}
                                checked={product.isActive}
                              />
                            </td>
                            <td scope="col" style={{ textAlign: "center" }}>
                              <i
                                onClick={() => this.goToDetail(product)}
                                className="fas fa-sticky-note btn p-1"
                              ></i>
                              <i
                                onClick={() => this.goToEdit(product)}
                                className="fa fa-edit btn p-1"
                              ></i>

                              {/* <Link to={{ pathname: '/dashboard/admin-edit', admin}}>
                                                                <i className="fa fa-edit"></i>
                                                            </Link> */}
                            </td>
                          </tr>
                        );
                      })}
</>
)
}

Answer 1

this.state = {
  products: [],
  isActive: null,
  _id: "",
};

就是这样一个错误的状态。正如您所说，每个产品都有自己的isActive 状态。 所以你的状态应该像下面这样简单

this.state = {
  products: [],
  isLoading: false,

};

另一方面，您不应该覆盖状态中不相关的值

this.setState((prevState) => ({
    products: prevState.products.map((product) => ({
       ...product,
       isActive: product._id === _id ? !product.isActive : product.isActive,
    })),
    isLoading: false
}));

在 else 块中，您不应该删除产品

this.setState((prevState) => ({
   ...prevState,
   isLoading: false,
}));