Question

我有一个set_data方法，该方法用于根据id设置数据。我知道ID更改时在componentdidupdate中调用此set_data很容易。但是这样做并不会在父组件中设置某些状态变量。

摆脱想要在render中调用set_data方法的问题。但是，由于此set_data方法设置了数据状态，因此在render中进入了无限循环。也不能提供执行set_data方法的条件（例如prevprops.id！== this.props.id）。

为防止发生这种情况，请考虑使用此set_data方法根本不设置状态。并可以在render中调用此set_data方法。下面是代码，

export default class child extends React.Component {
state = {
    query: '',
    data: null,
};
empty_id = 0xffffffff;

componentDidMount() {
    this.set_open_data();
}

componentDidUpdate(prevProps) {
   if (prevProps.id !== this.props.id) {
        this.set_data();
   }
}

set_data = () => {
    if (!this.props.info) {
        return;
    }
    if (this.props.id === this.empty_id) {
        this.setState({data: null});
        return;
    }

    let data = {
        info: [],
        values: [],
    };
    const info = this.props.info;
    for (let i=0, ii=info.length; i < ii; i++) {
        if (info[i].meshes.includes(this.props.id)) {
            const info = info[i].info;
            const values = info[i].values;
            data = {
                info: typeof info === 'string' ? info.split('\r\n') : [],
                values: values ? values : [],
            };
            break;
        }
    }
    this.setState({data: this.filter_data(data, this.state.query)});
  };
  render = () => {
      const shown_data= this.state.data;  
      /* i want to call set_data method here*/};}

有人可以帮我解决这个问题吗？谢谢。

Answer 1

您不能在此处调用setData，因为那将是反模式。它将触发一个循环，该循环将连续渲染并保持设置状态。
您可能可以这样重写组件：

export default class child extends React.Component {
  state = {
     query: ''
  };
  empty_id = 0xffffffff;

  componentDidMount() {
    this.set_open_data();
  }

  set_data = () => {
    let data = {};
    if (!this.props.info) {
      return data;
    }
    if (this.props.id === this.empty_id) {
      return data;
    }

    let data = {
      info: [],
      values: [],
    };
    const info = this.props.info;
    for (let i=0, ii=info.length; i < ii; i++) {
        if (info[i].meshes.includes(this.props.id)) {
            const info = info[i].info;
            const values = info[i].values;
            data = {
                info: typeof info === 'string' ? info.split('\r\n') : [],
                values: values ? values : [],
            };
            break;
        }
    }
    data = this.filter_data(data, this.state.query);
    return data;
  };

  render = () => {
      const shown_data= this.state.data; 
      const data = this.set_data(); 
      /* i want to call set_data method here*/};}

在这种情况下，我们不在状态中设置数据。对于每个新ID，它将获取新数据并从渲染中进行计算，从而避免使用反模式。我还删除了componentDidMount，因为我们正在渲染中进行计算。注意：此解决方案意味着从状态中删除数据，如果您在渲染之前未在任何地方使用data，那么它将起作用。

让我知道这是否有帮助。

如何在render reactjs中使用方法？

1 个答案: