i make a porject that extract data from my db with rest api and i used in backend(SPRINGBOOT). i created a dashboard contain chart and what i need is that i can update auto the chart(data) without refresh the page. i used react Modal so can you check for me saveEmployee function. i don't understand how i can update the data i try add componentdidMount in the save function but the it always give me a missing information in the chart.

class Final extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
      showAddModal: false,
      firstName: "",
      lastName: "",
      emailId: "",
      gender: "",
      count: [],
      counttest: [],
    };
  }

  componentDidMount() {
    EmployeeService.getNbrePerGender().then((res) => {
      this.setState({ count: res.data });
    });
  }
  changeFirstNameHandler(event) {
    this.setState({ firstName: event.target.value });
  }
  //
  saveEmployee() {
    let employee = {
      firstName: this.state.firstName,
      lastName: this.state.lastName,
      emailId: this.state.emailId,
      gender: this.state.gender,
    };
    EmployeeService.createEmployees(employee);
  }

  render() {
    return (
      <div>
        <PieChart
          id="pie"
          palette="Bright"
          dataSource={this.state.count}
          title="Gender "
        ></PieChart>

        <button onClick={this.handleOpenAddModal} className="btn btn-info">
          Add
        </button>
        <Modal isOpen={this.state.showAddModal}>
          <div className="container">
            <div className="row">
              <div className="card col-md-6 offset-md-3 offset-md-3">
                <h3 className="text-center">Add Employee</h3>
                <div className="form-group">
                  <label> first Name</label>
                  <input
                    placeholder="First Name"
                    name="firstName"
                    className="form-control"
                    value={this.state.firstName}
                    onChange={this.changeFirstNameHandler}
                  />
                </div>
                <div className="form-group">
                  <label> Last Name</label>
                  <input
                    placeholder="Last Name"
                    name="lastName"
                    className="form-control"
                    value={this.state.lastName}
                    onChange={this.changeLastNameHandler}
                  />
                </div>
                <div className="form-group">
                  <label> Email Adress</label>
                  <input
                    placeholder="Email Adress"
                    name="emailId"
                    className="form-control"
                    value={this.state.emailId}
                    onChange={this.changeEmailIdHandler}
                  />
                </div>
                <div>
                  <label>Gender</label>
                </div>
                <div>
                  <input
                    className="form-check-input"
                    type="radio"
                    value="Male"
                    name="gender"
                    onChange={this.changeGenderIdHandler}
                  />{" "}
                  Male
                  <input
                    className="form-check-input"
                    type="radio"
                    value="Female"
                    name="gender"
                    onChange={this.changeGenderIdHandler}
                  />{" "}
                  Female
                </div>

                <button className="btn btn-success" onClick={this.saveEmployee}>
                  Save
                </button>
              </div>
            </div>
          </div>
        </Modal>
      </div>
    );
  }
}

export default Final;

CodePudding user response：

Just request the updated information after createEmployees finishes. I'm assuming it's also an async function if getNbrePerGender is, so:

class X {
  // ...
  componentDidMount() {
    this.updateStats();
  }

  updateStats = async () => {
    const res = await EmployeeService.getNbrePerGender();
    this.setState({ count: res.data });
  };

  async saveEmployee() {
    const employee = {
      firstName: this.state.firstName,
      lastName: this.state.lastName,
      emailId: this.state.emailId,
      gender: this.state.gender,
    };
    await EmployeeService.createEmployees(employee);
    await this.updateStats();
  }
  // ...
}