Question

这是我目前的代码

class cart extends Component {
    state = { loading: [] };

    addToCart = (e, id) => {
        let loading = this.state.loading.slice();
        loading[e] = true;
        this.setState({
            loading,
        })
    };
    render() {
        const { data } = this.props;

        return (
            <div>
            {data.map(catering => {
                const { menus } = catering;

                return (
                    <Row>
                    {menus.map(menu => (
                        <Col xs={12} md={12} lg={6} key={menu.id} className="m-bottom-15">
                        <Card style={{ height: '165px', border: 0, overflow: 'hidden' }}>


                        <CardActions>
                        <LoadingButton
                        className="button small primary pull-right"
                        loading={thi.state.loading || false}
                        onClick={e => this.addToCart(e, menu.id)}
                        >
                        <MdAdd size={18} color={white} />
                        <span className="font-14 font-400">Add to cart</span>
                        </LoadingButton>

                        </CardActions>
                        </Card>
                        </Col>
                        ))}
                    </Row>

                    );
            }
        }

map功能完成后，将有大约20个按钮。

我想要达到的目标是：每次用户点击add to cart按钮，我都会调用ajax来保存购物车并显示特定点击按钮的加载。完成ajax后，将状态恢复正常。

在我目前的代码中，我还没有拨打我的ajax电话，我仍然想确保按下加载按钮。现在它不起作用。

我怎样才能做到这一点？

感谢。

Answer 1

addToCart方法中存在一些错误。您应该使用id作为加载索引并将加载数组设置为以下状态：

addToCart = (e, id) => {
    let loading = this.state.loading.slice();
    loading[id] = true;
    this.setState({
        loading: loading
    });
};

另外，在你的render方法中，将this.state.loading更改为this.state.loading [menu.id]：

<LoadingButton
    className="button small primary pull-right"
    loading={this.state.loading[menu.id] || false}
    onClick={e => this.addToCart(e, menu.id)}
>

当ajax调用完成后，你只需调用setState函数，它在回调方法中将加载数组值设置为false。

Answer 2

维护菜单ID ，而不是保持bool，只要点击添加按钮，就可以将该项的ID推送到加载array 。生成卡片时，请检查加载array是否具有array，如果是，则显示加载，否则显示卡片。

像这样写：

id

Answer 3

对于钩子们，这就是我所做的

const [isLoading, setIsLoading] = useState([]);
<button
        type="button"
        disabled={isLoading[item.username]}
        className="btn btn-success btn-rounded btn-sm my-0"
        onClick={()=>activateOrDeactivate( item.activated,item.username)}
      >      {isLoading[item.username] && <i className="fa fa-circle-o-notch fa-spin"></i>}
      {isLoading[item.username]&& <span> Activating...</span>}
      {!isLoading[item.username]&& <span>Activate</span>}</button>


 const activateOrDeactivate = (valTrueOrFalse,newusername) => {
    let loading = isLoading.slice();
    loading[newusername] = true;
    setIsLoading(loading)
    let config = {
      headers: {
        Authorization: "Bearer " + state.token
      },
    };

    api.post(
      "process-activation",
      {
        activated: !valTrueOrFalse,
        username:newusername
      },
      config
    ).then(
      response => {
        getAllUsers()
        let loading = isLoading.slice();
        loading[newusername] = false;
        setIsLoading(loading)

React - 仅在特定的单击按钮上设置加载状态

3 个答案: