反应：如何更改 map 内拨动开关的状态？

Question

I have an array named Products. I am showing this products data on the listing page. Each product in products also has a value called isActive. I want to change this isActive value by putting enable/disable switch on listing page. The codes I wrote are as follows, but whenever I click on the toggle, the isActive value returns always false. What should I do?

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: "",
};

is such a wrong state. As you said, each product has its own isActive state. So your state should be as simple as the following

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

};

On the other hand, you should not override unrelated values in the state

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

and in the else block, you should not remove products

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