时间戳

首页 > 解决方案 > 在 React 中状态更改时重新渲染组件

javascript - 在 React 中状态更改时重新渲染组件

问题描述

我有一个调用两个函数的应用程序；我的购物车和我的物品。我正在尝试这样做，因此当调用 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 内的跨度相应更新。

标签： javascripthtmlreactjs

解决方案

您必须将返回的对象文字包装到箭头函数中的括号中。否则，花括号将被视为表示函数的主体。以下作品：

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

所以调用setStatein 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为箭头函数以避免在构造函数中绑定它

推荐阅读