Javascript 如何在将子组件中的props.function分派给redux thunk onClick后更新Event.target

在这个电子商务项目中，onClick“add to cart”应该增加购物车计数，并将按钮textContent更改为“Remove from cart”，同一元素的第二次onClick应该减少计数并将textContent更改回“add to cart”。我展示了两种不同的条件语法，它们产生相反的行为

function RenderBooks({book, updateCart}) {
    return(
        <Card className="allbooks">
            <CardBody>
            <Link to="/" style={{textDecoration:'none', color:'black'}} >
                <CardTitle><strong>{book.name}</strong></CardTitle>
                <CardImg width="100%" src={bookImg} alt="book image" />
                <CardText>{book.price}</CardText>
            </Link>
                <form>
                    <Button className="add-to-cart" style={{textDecoration:'none'}} color="link" 
                        onClick={(e, id) => updateCart(e, book.id)}
                    >
                        Add to cart
                    </Button>
                </form>
            </CardBody>
        </Card>
    );   
}

函数RenderBooks（{book，updateCart}）{
返回(
{book.name}
{book.price}
updateCart（e，book.id）}
>
添加到购物车
);   
}

在updateCart的第一个条件中，会激发event.target.textContent，但在父组件中调用redux dispatch的this.props.addToCart不会激发，而在else条件中则相反，也就是说，会激发dispatch函数，而event.target不会激发。如何让dispatch函数在event.target.textContent激发后激发，请提前感谢

class Books extends React.Component {

    constructor(props){
        super(props);

        this.updateCart = this.updateCart.bind(this);
        
    }
    

    updateCart(event, id) {

        if (event.target.textContent === 'Add to cart') {
            event.target.textContent = 'Remove from cart';
            const count = this.props.cartcount.cartcount;
            () => {
                this.props.addToCart(id, count);
            }
        }
        else {
            event.target.textContent = 'Add to cart';
            let count = this.props.cartcount.cartcount;
            this.props.subtractFromCart(id, count);
        }
    }


    render() {

        const count = this.props.cartcount.cartcount;
        const book = this.props.books.books.map((book, index) => {
            return ( 
                <div key={index} className="col-8 col-md-4 col-lg-3">
                    <RenderBooks book={book} updateCart={this.updateCart} />
                </div>     
            );
        });
        
        return (
            <div>
                <Navbar dark expand="md" id="nav-books">
                    <div className="container">
                        <Nav className="mr-auto" navbar>
                            <NavItem>
                                <NavLink className="nav-link" to='/'>
                                    <BsArrowLeft />
                                </NavLink>
                            </NavItem>
                        </Nav>
                        <NavbarBrand className="mc-auto logo" href="/">Soteria</NavbarBrand>
                        <Nav className="ml-auto" navbar>
                            <NavItem>
                                <NavLink className="nav-link" to='/'>
                                    <FiShoppingCart /> {count}
                                </NavLink>
                            </NavItem>
                        </Nav>
                    </div>
                </Navbar>
                <div className="container books">
                    <div className="row">
                        {book}
                    </div>
                </div>
            </div>
        );
    }   
}

export default Books;

类库扩展了React.Component{
建造师（道具）{
超级（道具）；
this.updateCart=this.updateCart.bind（this）；
}
updateCart（事件，id）{
如果（event.target.textContent==='添加到购物车'）{
event.target.textContent='Remove from cart'；
常量计数=this.props.cartcount.cartcount；
() => {
this.props.addToCart（id，count）；
}
}
否则{
event.target.textContent='添加到购物车'；
让计数=this.props.cartcount.cartcount；
这个.props.subtractFromCart（id，count）；
}
}
render（）{
常量计数=this.props.cartcount.cartcount；
constbook=this.props.books.books.map（（书，索引）=>{
报税表（
);
});
返回(
索特里亚
{count}
{book}
);
}   
}
导出默认书籍；

我了解到redux thunk是同步的，因此在更新存储时事件侦听器将丢失。因此，我最终想出了一个直观的react redux解决方案，添加了itemids param，一个存储单击项目ID的数组，并使用三元运算符更新RenderBooks（）中的UI

function RenderBooks({book, itemids, updateCart}) {
    return(
        <Card>
            <CardBody>
            <Link to="/" style={{textDecoration:'none', color:'black'}} >
                <CardTitle><strong>{book.name}</strong></CardTitle>
                <CardImg width="100%" src={bookImg} alt="book image" />
                <CardText>{book.price}</CardText>
            </Link>
                    {
                        itemids.length != 0 ?
                            itemids.includes(book.id) ?
                                <Button onClick={(e, id) => updateCart(e, book.id)}>
                                    Remove from cart
                                </Button>
                            :
                                <Button onClick={(e, id) => updateCart(e, book.id)}>
                                    Add to cart
                                </Button>
                        :
                        
                        <Button onClick={(e, id) => updateCart(e, book.id)}>
                            Add to cart
                        </Button>       
                    }
            </CardBody>
        </Card>
    );   
}

函数RenderBooks（{book，itemids，updateCart}）{
返回(
{book.name}
{book.price}
{
itemids.length！=0？
itemids.includes（book.id）？
updateCart（e，book.id）}>
从购物车上取下
:
updateCart（e，book.id）}>
添加到购物车
:
updateCart（e，book.id）}>
添加到购物车
}
);   
}

所以在updateCart中，我只使用event.target.textContent来确定调用哪个props.function

class Books extends React.Component {

    constructor(props){
        super(props);

        this.updateCart = this.updateCart.bind(this);
    }


    updateCart(event, id) {

        let target = event.target.textContent;

        if (target === 'Add to cart') {
                        
            this.props.addToCart(id)

        }
        else {
            
            this.props.subtractFromCart(id);
        }
    }


    render() {

        const book = this.props.books.books.map((book, index) => {
            return ( 
                <div key={index} className="col-8 col-md-4 col-lg-3">
                    <RenderBooks book={book} itemids={this.props.itemids}       
                                 updateCart={this.updateCart} 
                    />
                </div>     
            );
        });
        
        return (
            <div>                  
                <div className="container books">
                    <div className="row">
                        {book}
                    </div>
                </div>
            </div>
        );
    }   
}
export default Books;

类库扩展了React.Component{
建造师（道具）{
超级（道具）；
this.updateCart=this.updateCart.bind（this）；
}
updateCart（事件，id）{
让target=event.target.textContent；
如果（目标=='添加到购物车'）{
this.props.addToCart（id）
}
否则{
此.props.subtractFromCart（id）；
}
}
render（）{
constbook=this.props.books.books.map（（书，索引）=>{
报税表（
);
});
返回(
{book}
);
}   
}
导出默认书籍；

在updateCart方法

（）=>{target；this.props.addToCart（id，count）；}

中，如果它是一个匿名函数，您想做什么？请详细说明！多莉，谢谢你。划伤靶；它仍然没有区别，这个.props.addToCart（id，count）在父/主组件中被分派到ActionCreators中的redux thunk，然后它分派到reducer，该reducer更新count并导出到configureStore。计数已更新，但event.textContent=“从购物车中移除”不会更新，尽管它在console.log中会更新。移除props.function分派和event.textContent激发。从目前为止的研究来看，这似乎是redux thunk的行为，但不能确定。嗨@Uwem，这应该行得通。检查我根据您的场景创建的最小复制谢谢@Dolly，您的实现可以工作，但我需要在向redux thunk发送props.addToCart（）后实现该行为，这不会发生，因为redux thunk是同步的，正如我所了解的，所以eve