Блог

Я пытаюсь добиться создания кнопки приостановки работы пользователя путем обновления значений статуса пользователя на приостановленный, но проблема в том, что статус определен, но другие значения не определены я сделал что-то не так или есть какой-либо способ обновить значения, чтобы другая переменная, подобная имени, не требовалась?

Это то, что я имею в виду:

Это мой код:

 const User = (props) => (
  <>
    <DropdownButton id="dropdown-basic-button" title="Action">
      <Dropdown.Item>
        <a
          href="user"
          onClick={() => {
            props.onSubmit(props.user[0]);
          }}
        >
          <i className="fas fa-trash"></i> Suspend
        </a>
      </Dropdown.Item>
    </DropdownButton>
  </>
);

export default class Users extends Component {
  constructor(props) {
    super(props);

    this.onSubmit = this.onSubmit.bind(this);

    this.state = { users: [] };
  }

  componentDidMount() {
    axios
      .get("http://localhost:5000/users/")
      .then((response) => {
        this.setState({ users: response.data });
      })
      .catch((error) => {
        console.log(error);
      });
  }



  onSubmit(id) {
    const user = {
      name: this.state.name,
      password: this.state.password,
      email: this.state.email,
      storeName: this.state.storeName,
      storeUrl: this.state.storeUrl,
      date: this.state.date,
      status: "Suspended",
    };

    console.log(user);

    axios
      .post("http://localhost:5000/users/update/"   id, user)
      .then((res) => console.log(res.data));
  }
  userList(currentuser) {
    return (
      <User
        user={currentuser}
        key={currentuser[0]}
        onSubmit={this.onSubmit}
      />
    );
  }
  render() {
    const columns = [
      {
        name: "_id",
        options: {
          display: false,
        },
      },
      {
        name: "name",
        label: "Name",
        options: {
          filter: true,
          sort: true,
        },
      },
      {
        name: "Action",
        options: {
          customBodyRender: (value, tableMeta, updateValue) => {
            return <>{this.userList(tableMeta.rowData)}</>;
          },
        },
      },
    ];
    const { users } = this.state;
    return (
      <>
          <MUIDataTable data={users} columns={columns} />
      </>
    );
  }
}
 

Вы не определяли и не устанавливали значения индивидуальных атрибутов пользователя в состоянии! Поэтому неудивительно, что они отображаются как неопределенные, когда вы пытаетесь их прочитать…

Самым простым решением было бы:

 onSubmit(id) {
    //let user = this.state.users.find(user => user.id === id); // find by id
    let user = this.state.users[id]; // find by index

    if (user) {
        user.status = 'Suspended';

        console.log(user);

        axios
          .post("http://localhost:5000/users/update/"   id, user)
          .then((res) => console.log(res.data));
    }
  }