我有一个可以调用两个功能的应用程序: MyCart和MyItems。我试图做到这一点,以便在调用MyItems中呈现的按钮时,它会调用主应用程序组件(父级)内部的方法并更改状态,但由于某些原因,它不会更改MyCart跨度中的值。

我下面的代码是我要尝试执行的操作,但是它不起作用,我不知道为什么。

class ShopRemake extends React.Component {
    constructor() {
        super();
        this.state = {
            total: 0
        }

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

    changeTotal() {
        this.setState(prevState => {total: ++prevState.total});
        console.log(this.state);
    }

    render() {
        return (
            <React.Fragment>
                <MyItem changeTotal={this.changeTotal}/>
                <MyCart total={this.state.total}/>
            </React.Fragment>
        );
    }
}

function MyItem(props) {
    return (
        <button onClick={props.changeTotal}> Click Me </button>
    );
}

function MyCart(props) {
    return (
        <span> Total Items: {props.total} </span>
    );
}


我想要它,以便在单击按钮后MyCart内的跨度相应地更新。

最佳答案

您必须将返回的对象文字包装在箭头函数中的括号内。否则,花括号将被视为表示功能的主体。以下作品:

p => ({ foo: 'bar' })


因此,在setState中调用changeTotal

changeTotal() {
    this.setState(prevState => {total: ++prevState.total});
    console.log(this.state);
}


应替换为以下内容:

changeTotal() {
    this.setState(prevState => ({total: ++prevState.total}));
    console.log(this.state);
}


另外,setState是异步的,您将需要等待它(不推荐)或使用回调作为第二个参数来查看结果状态:

changeTotal() {
    this.setState(
        prevState => ({total: ++prevState.total}),
        () => { console.log(this.state) }
    );
}




编辑:

旁注,可以将代码中下面的2个组件简化为箭头函数,以得到完全相同的结果,同时使它们更易于阅读:

const MyItem = ({ changeTotal }) => <button onClick={changeTotal}> Click Me </button>

const MyCart = ({ total }) => <span> Total Items: {total} </span>


您还可以将changeTotal转换为箭头函数,以避免必须将其绑定到构造函数中

10-06 15:11