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>
    );
  }
}

修改

  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);
      });

  }

这会获取/过滤数据

材料UI开关不会立即在React中更新

0 个答案: