1 элемент в списке для обновления при изменении состояния с помощью React & Redux Saga

Question

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

У меня есть список людей, на каждой записи есть кнопки, с помощью которых можно проверить или отключить человека или отменить его по отдельности. , Все это прекрасно работает на стороне Redux, так как состояние корректно обновляется и данные передаются в Firebase с помощью ax ios. Вверху у меня есть индикатор выполнения, который обновляет количество зарегистрированных пользователей и обновляет информацию об изменениях, но отдельный человек не обновляется, чтобы показать новые правильные данные. Я надеюсь, что мое объяснение имеет смысл.

Мой код выглядит следующим образом:

GuestItem. js

const GuestItem = props => {
const styleObj = {
fontSize: 14,
color: "mediumseagreen",
fontWeight: 800
}

return (
<div className={classes.Guest_item}>
<div>
  {props.visibility && (
    <div className={classes.Alert}>
      <p><strong>{props.alert}</strong></p>
    </div>
  )}
</div>
  <div className={classes.Guest_item__content}>
      <div className={classes.Guest_item__info} key={props.key}>
      <p><strong>{props.firstName} {props.lastName}</strong></p>
         <p>Total Guests Attending: {props.pax}</p>
         {props.checked > 0 && (<p style={styleObj}>Total Guests Checked In: {props.checked}</p>)}
      </div>
      <button 
         onClick={props.in}
         >
        <FontAwesomeIcon icon="user-check"></FontAwesomeIcon>
         </button>
         <button 
         onClick={props.out}
         >
        <FontAwesomeIcon icon="user-times"></FontAwesomeIcon>
         </button>
         <button 
         onClick={props.cancel}
         >
        <FontAwesomeIcon icon="user-slash"></FontAwesomeIcon>
         </button>
  </div>
</div>
  );};

export default connect(null)(GuestItem);

Checkin. js

class Checkin extends Component {
  state = {
    searchTerm: "",
    items: this.props.loadedGuests,
    filteredItems: this.props.loadedGuests,
    requirementKey: Math.random(),
  };


  filterList = (event) => {
    this.setState({ filteredItems: this.props.loadedGuests });
    const search = event.target.value.toString().toLowerCase();
    let searchResults = [...this.state.items];
    searchResults = searchResults.filter((result) => {
      return (
        result.First_Name.toString().toLowerCase().search(search) !== -1 ||
        result.Last_Name.toString().toLowerCase().search(search) !== -1
      );
    });

    this.setState({
      filteredItems: searchResults,
      searchTerm: event.target.value.toString().toLowerCase(),
    });
  };

  checkinHandler = (id) => {
    console.log("Checkin: " + id + ". Currently in " + this.props.checked);
    this.props.onCheckin(id);
    console.log("Guest: " + this.state.items[id].First_Name);
    this.setState({
      requirementKey: Math.random(),
    });
  };

  checkoutHandler = (id) => {
    console.log("Checkout: " + id + ". Currently in " + this.props.checked);
    this.props.onCheckout(id);
    console.log("Guest: " + this.state.items[id].First_Name);
    this.setState({
      requirementKey: Math.random(),
    });
  };


  guestCancelHandler = (id) => {
    console.log("Cancel: " + id + "Currently in " + this.props.checked);
    this.props.onGuestCancel(id);
    console.log("Guest: " + this.state.items[id].First_Name);
    this.setState({
      requirementKey: Math.random(),
    });
  };

  static getDerivedStateFromProps(props, state) {
    if (props.checked !== state.checked) {
      console.log("change", props.checked);
    }
    return null;
  }

  render() {
    const parent = {
      name: "Attending",
      value: ((this.props.checked / this.props.total) * 100).toFixed(),
      color: "#b53471",
    };

    let list = this.state.filteredItems.map((guest) => {
      return (
        <GuestItem
          key={this.state.requirementKey + guest.id}
          gid={guest.id}
          firstName={guest.First_Name}
          lastName={guest.Last_Name}
          pax={guest.Pax}
          checked={guest.Qty_Checked}
          in={() => this.checkinHandler(guest.id)}
          out={() => this.checkoutHandler(guest.id)}
          cancel={() => this.guestCancelHandler(guest.id)}
        />
      );
    });

    if (this.props.loading) {
      list = <Spinner />;
    }

    let errorMessage = null;

    if (this.props.error) {
      errorMessage = <p>{this.props.error.message}</p>;
    }

    return (
      <React.Fragment>
        <div className={classes.ProgressBar}>
          <div
            className={classes.Filler}
            style={{ width: parent.value + "%" }}
          ></div>
          {this.props.checked === 0 ? (
            <span className={classes.Value}>
              {"Start Checking In: " + this.props.total + " guests"}
            </span>
          ) : (
            <span className={classes.Value}>
              {"(" +
                parent.value +
                "%) " +
                this.props.checked +
                " of " +
                this.props.total +
                " guests"}
            </span>
          )}
        </div>
        <div className={classes.Search}>
          <form>
            <label className={classes.Search_label} htmlFor="search-input">
              <input
                type="text"
                placeholder="Search..."
                onChange={this.filterList}
              />
            </label>
          </form>
        </div>
        <div className={classes.Checkin}>
          {/* {alertMessage} */}
          {errorMessage}
          <ul className={classes.Guest_list}>{list}</ul>
        </div>
      </React.Fragment>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    isAuthenticated: state.auth.token !== null,
    authRedirectPath: state.auth.authRedirectPath,
    loading: state.dashboard.loading,
    error: state.dashboard.error,
    loadedGuests: state.dashboard.dashData,
    total: state.dashboard.total,
    checked: state.dashboard.checked,
    eid: state.dashboard.eventId,
    alertMessage: state.guests.alertMessage,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onCheckin: (id) => dispatch(actions.guestCheckin(id)),
    onCheckout: (id) => dispatch(actions.guestCheckout(id)),
    onGuestCancel: (id) => dispatch(actions.guestCancel(id)),
    onGuests: () => dispatch(actions.fetchGuests()),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Checkin);

просмотр сайта Redux Отображение изменений, внесенных в магазине