Переключатель пользовательского интерфейса материала не обновляется немедленно в React

Question

У меня есть компонент строки, который содержит всю информацию о проекте, и переключатель, который показывает активное состояние проекта (T или F).

  render() {
    const dateDisplay = moment(this.props.createdAt).format('MMM YYYY');
    return (
      <tr
        className="experiment-list__row"
        onMouseOver={() => this.props.onRowHovered(this.props.rowItems.id)}
      >
        <td>{this.props.rowItems.name}</td>
        <td>{this.props.rowItems.owner}</td>
        <td>{dateDisplay}</td>
        <td className="experiment-list--col__switch">
          <Switch 
            color="primary" 
            checked={this.props.rowItems.status}
            onChange={()=>{this.handleSubmit(this.props.rowItems.id, this.props.rowItems.status)}}
          />
        </td>
      </tr>
    );
  }

Это выглядит так.Когда я нажимаю на переключатель, он должен переключаться и изменять статус в зависимости от текущего статуса.handleSubmit делает это для меня.

  handleSubmit(rowID: any, rowStatus: any) {

    console.log(rowID, rowStatus)
    makeMutation(UpdateExperimentQuery, {
      update: {
        id: rowID,
        data: {
          status: !rowStatus
        },
      },
    })
      .then(responseData => {
        console.log(responseData)
      })
      .catch(err => {
        console.log(err);
      });
  }

Он корректно обновляет данные.

Однако он не обновляется немедленно, даже если атрибут checked коммутатора представляетstatus строки.

Когда я обновляю его, оно меняется, но я хочу, чтобы оно показывалось немедленно, поскольку в этом и заключается смысл использования реакции.

Пожалуйста, помогите

РЕДАКТИРОВАТЬ

• Отображение информации

  <div className="experiments-list-container">
  
      <List
        onRowHovered={this.getExperimentID}
        rowItems={this.state.experimentData}
      />
  
  </div>
  

• Это другой компонент ListRow

  const List = props => {
    return (
      <table className="experiment-list">
        <tbody>
          <ListHeader />
          {props.rowItems.map((data, i) => (
            <ListRow key={i} rowItems={data} onRowHovered={props.onRowHovered} />
          ))}
        </tbody>
      </table>
    );
  };
  

  Визуализация ListRow

  export class ListRow extends Component<ListRowProps, ListRowState> {
    constructor(props) {
      super(props);
  
      this.state = {
        experimentData: [],
        status: props.status //unused right now
      };
  
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    // also not used now
    componentWillUpdate() {
      if (this.state.status !== this.props.status) {
        this.setState({
          status: this.props.status,
        });
      }
    }
  
    handleSubmit(rowID: any, rowStatus: any) {
  
      console.log(rowID, rowStatus)
      makeMutation(UpdateExperimentQuery, {
        update: {
          id: rowID,
          data: {
            status: !rowStatus
          },
        },
      })
        .then(responseData => {
          console.log(responseData)
        })
        .catch(err => {
          console.log(err);
        });
    }
  
    render() {
      const dateDisplay = moment(this.props.createdAt).format('MMM YYYY');
      return (
        <tr
          className="experiment-list__row"
          onMouseOver={() => this.props.onRowHovered(this.props.rowItems.id)}
        >
          <td>{this.props.rowItems.name}</td>
          <td>{this.props.rowItems.owner}</td>
          <td>{dateDisplay}</td>
          <td className="experiment-list--col__switch">
            <Switch 
              color="primary" 
              checked={this.props.rowItems.status}
              onChange={()=>{this.handleSubmit(this.props.rowItems.id, this.props.rowItems.status)}}
            />
          </td>
        </tr>
      );
    }
  }
  

EDIT

  changeStatus(rowID, rowStatus) {
    // close if the selected employee is clicked

    console.log(rowID, rowStatus)

     makeMutation(UpdateExperimentQuery, {
        update: {
          id: rowID,
          data: {
            status: !rowStatus
          },
        },
      })
      .then(responseData => {

        setTimeout(() => {
          this.componentWillMount();
        },1000);

        console.log('responseData', responseData)
      })
      .catch(err => {
        console.log(err);
      });
  }

это обновляет данные и вызывается вList компонент.

  componentWillMount() {

    let filteredData = []

    //this.props.fetchExperiments();
    makeQuery(ExperimentsListQuery)
      .then(responseData => {
        this.setState(prevState => ({
          experimentData: responseData.Experiments,
        }));

        for(var i = 0; i < this.state.experimentData.length; i++) {
          console.log(this.state.experimentData[i])
          if(this.state.experimentData[i].status === this.state.viewActive) {
            filteredData.push(this.state.experimentData[i])
          }
        }

        this.setState({
          filteredExpData: filteredData
        })

      })

      .catch(err => {
        //actions.setSubmitting(false);
        console.log(err);
      });

  }

, который выбирает / фильтрует данные