javascript - 为什么调用父方法不起作用？状态未更新

Question

尝试从组件调用父方法来更新状态，但它似乎没有更新状态。该函数在控制台日志运行时被调用，但状态没有更新。

我正在尝试从其子组件 - showFirstFive() (作为 prop 传递)中运行在 <CustomerTable /> 组件上找到的 <CustomerEntry /> 函数。

顶部的按钮可以很好地更改状态，但表中(子组件中)的按钮不会。

任何帮助将不胜感激! 😀

codepen here

class CustomerEntry extends React.Component {
    modifyState(e) {
        e.preventDefault();
        console.log("test");
        this.props.changeState;
    }

    render() {
        return (
            <tr>
                <td>{this.props.name}</td>
                <td>{this.props.email}</td>
                <td>{this.props.postcode}</td>
                <td>
                    {this.props.product}
                    <button onClick={this.modifyState.bind(this)}>Show first 5 items</button>
                </td>
            </tr>
        );
    }
}

class CustomerTable extends React.Component {
    constructor(props) {
        super(props);
        let customers = this.props.customers;
        this.state = {
            customers
        };
    }

    showFirstFive() {
        let customers = this.props.customers;
        customers = customers.slice(0, 5);
        this.setState({ customers });
    }
    showAll() {
        let customers = this.props.customers;
        this.setState({ customers });
    }

    render() {
        console.log("this.props.customers", this.props.customers);
        let customerList;

        let thisComp = this;

        if (this.props.customers) {
            customerList = this.state.customers.map(function(customerData) {
                return (
                    <CustomerEntry
                        key={customerData.key}
                        changeState={thisComp.showFirstFive.bind(this)}
                        index={customerData.key}
                        name={customerData.name}
                        email={customerData.email}
                        postcode={customerData.postcode}
                        product={customerData.product}
                    />
                );
            });
        }

        return (
            <div>
                <button onClick={this.showFirstFive.bind(this)} >Show first 5 items</button>
                <button onClick={this.showAll.bind(this)} >Show all</button>
                <table>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Postcode</th>
                            <th>Product</th>
                        </tr>
                    </thead>
                    <tbody>
                        {customerList}
                    </tbody>
                </table>
            </div>
        );
    }
}


class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            customers: [
                {
                    key: "86464",
                    name: "Mr John Smith",
                    email: "test@test.com",
                    postcode: "LN47AT",
                    product: "apples",
                },
                {
                    key: "787862",
                    name: "Miss Sarah Jackson",
                    email: "sarah@hello.com",
                    postcode: "DN54LQ",
                    product: "apples",
                },
                {
                    key: "4454564",
                    name: "Dr Hugh James",
                    email: "hugh@test.com",
                    postcode: "S102AT",
                    product: "bananans",
                },              {
                    key: "11123134",
                    name: "Mr John Smith",
                    email: "test@test.com",
                    postcode: "LN47AT",
                    product: "apples",
                },
                {
                    key: "68868",
                    name: "Miss Sarah Jackson",
                    email: "sarah@hello.com",
                    postcode: "DN54LQ",
                    product: "apples",
                },
                {
                    key: "6876871",
                    name: "Dr Hugh James",
                    email: "hugh@test.com",
                    postcode: "S102AT",
                    product: "bananans",
                },
                                {
                    key: "17117",
                    name: "Mr John Smith",
                    email: "test@test.com",
                    postcode: "LN47AT",
                    product: "apples",
                },
                {
                    key: "17171716",
                    name: "Miss Sarah Jackson",
                    email: "sarah@hello.com",
                    postcode: "DN54LQ",
                    product: "apples",
                },
                {
                    key: "151571",
                    name: "Dr Hugh James",
                    email: "hugh@test.com",
                    postcode: "S102AT",
                    product: "bananans",
                },

            ]
        };
    }

    render() {
        return (
            <div>
                <CustomerTable customers={this.state.customers} />
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("app"));

Answer 1

您需要调用该方法，错过了():

modifyState(e) {
    e.preventDefault();
    console.log("test");
    this.props.changeState();    //here
}

建议:

1.不要通过以下方式绑定(bind)方法:

onClick = {this.showFirstFive.bind(this)}

在构造函数中定义它:

this.showFirstFive = this.showFirstFive.bind(this);

然后像这样使用它:onClick = {this.showFirstFive}

2. 不需要将 this 关键字的引用存储在单独的变量中，您可以使用 arrow function像这样:

customerList = this.state.customers.map((customerData) => {
      //now you can access this
}