我可以在反应状态内使用某个功能吗? [英] Can i have a function inside a state in react?

问题描述

我正在尝试在这样的状态下创建变量和函数

I'm trying to create variables and a function inside a state like this

     state = {
          modalVisible: false,
          photo:""
          getDataSourceState
    }

我已经完成了，如何在状态外调用函数并设置新状态.

which i have done, how can i call the function outside the state and set a new state.

这是我做过的事，但我总是出错

This what i have done but i keep getting errors

    getDataSourceState() {
        return {
          dataSource: this.ds.cloneWithRows(this.images),
        };
      }



    this.setState(this.getDataSourceState());

看看是什么促使我问这个问题，因为由于存在this.state = this.getDataSource()，我发现很难在该状态下访问modalVisible

see what prompted me to ask the question, because i was finding it difficult to access modalVisible in the state since there is a this.state = this.getDataSource()

constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      photo:"",
      sourceState: getDataSourceState()
    }
    this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.lastPhotoFetched = undefined;
    this.images = [];
    this.fetchPhotos();
    this.getDataSourceState = this.getDataSourceState.bind(this)
  }

componentDidMount(){
  this.getDataSourceState();
}

  getDataSourceState() {
    return {
      dataSource: this.ds.cloneWithRows(this.images),
    };
  }

  getPhotosFromCameraRollData(data) {
    return data.edges.map((asset) => {
      return asset.node.image;
    });
  }

}

推荐答案

您无法尝试，但从技术上讲，您可以使用一个函数，该函数返回要在构造函数中初始化的所需状态.我不建议这样做.

You can't the way you have attempted but technically yes, you can have a function that returns the desired state you want initialised in your constructor. I wouldn't suggest doing it though.

您会很快遇到组件无法正确更新状态的问题.

You will quickly run into issues where your components aren't updating state correctly.

您正在寻找的是一个返回值(而不是集合状态)的函数.您将执行以下操作:

What you are looking for is a function that returns a value as opposed to sets state. You would do something like this:

constructor(){
  super()

  this.state = {
    modalVisible: false,
    photo:""
    sourceState: this.getDataSourceState()
  }

  this.getDataSourceState = this.getDataSourceState.bind(this)
}

getDataSourceState(){
  return this.ds.cloneWithRows(this.images)
}

就像我提到的那样，这样做不是一个好主意.最好将状态值初始化为默认值，然后在componentDidMount中设置状态，如下所示:

As I mentioned, it is not a good idea to do it this way. You are better off initialising the state values as a default value and then setting the state in your componentDidMount like so:

constructor(){
    super()

    this.state = {
        modalVisible: false,
        photo:""
        sourceState: null
    }

    this.getDataSourceState = this.getDataSourceState.bind(this)
}


componentDidMount(){
    this.getDataSourceState()
}

getDataSourceState(){

    const data = this.ds.cloneWithRows(this.images)

    this.setState({soureState: data})
    
}

这样，您就拥有了一个可重用的函数，如果需要，当您在具有不同数据的相同组件之间移动导航并希望更新状态时，可以在 componentDidUpdate()中调用该函数.

This way you have a reusable function which you can call in componentDidUpdate() if need be for when you move navigate between the same component with different data and want the state to update.

这篇关于我可以在反应状态内使用某个功能吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！