javascript - 响应变量值更改不更新 React 组件

Question

更新 react 变量值 onClick 但不会更新 react 组件 我不明白为什么它不起作用以及问题到底是什么。

代码

constructor(props) {
  super(props);
  this.handleSubmit = this.handleSubmit.bind(this);
  this.state.pageEditInitialValue = false;
}

handleSubmit = id => {
  alert(id);
  this.state.pageEditInitialValue = true;
};

render() {
  const pageEdit = this.state.pageEditInitialValue;
  return (
    <div>
      {pageEdit ? (
        <Page title="Configuration">
          <Row>
            <Col>
              <Card className="mb-3">
                <CardHeader>Hotel Edit</CardHeader>
                <CardBody>
                  <Table responsive>
                    <thead>
                      <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Rating</th>
                        <th>Location</th>
                        <th />
                      </tr>
                    </thead>
                    <tbody>
                      {this.state.persons.map((person, index) => (
                        <tr key={person.hotelId}>
                          <td> {person.hotelId}</td>
                          <td> {person.hotelName}</td>
                          <td> {person.hotelRating}</td>
                          <td> {person.hotelLocation}</td>
                          <td>
                            <Button
                              color="primary"
                              onClick={() => this.handleSubmit(person._id)}
                            >
                              Edit
                            </Button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </Table>
                </CardBody>
              </Card>
            </Col>
          </Row>
        </Page>
      ) : (
        <Page title="Configuration">
          <Row>
            <Col>
              <Card className="mb-3">
                <CardHeader>Hotel Data</CardHeader>
                <CardBody>
                  <Table responsive>
                    <thead>
                      <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Rating</th>
                        <th>Location</th>
                        <th />
                      </tr>
                    </thead>
                    <tbody>
                      {this.state.persons.map((person, index) => (
                        <tr key={person.hotelId}>
                          <td> {person.hotelId}</td>
                          <td> {person.hotelName}</td>
                          <td> {person.hotelRating}</td>
                          <td> {person.hotelLocation}</td>
                          <td>
                            <Button
                              color="primary"
                              onClick={() => this.handleSubmit(person._id)}
                            >
                              Edit
                            </Button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </Table>
                </CardBody>
              </Card>
            </Col>
          </Row>
        </Page>
      )}
    </div>
  );
}

Answer 1

您不应该直接改变组件状态，而应该调用setState method相反。

handleSubmit = (id) => {
  alert(id)
  this.setState({ pageEditInitialValue: true })
}