Question

我只想将一个函数导出到actions.js文件，但我无法开始工作。这是工作基础：

export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    }
  }

  onOpen = () => {
    this.setState({visible:true});
    console.log(this.state.visible);
  }

  render() {
    return (
      <View style={styles.container}>
        <Button onPress={()=>{this.onOpen();}}>More</Button>
      </View>
    );
  }
}

现在我尝试了这个，当我按下按钮时出现错误：

错误：

Unhandled JS Exception: _this.setState is not a function. (In '_this.setState({ visible: true })', '_this.setState' is undefined)

代码：

let onOpen = () => {
  this.setState({visible:true});
  console.log(this.state.visible);
}

export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    }
    this.onOpen = onOpen.bind(this);
  }

  render() {
    return (
      <View style={styles.container}>
        <Button onPress={()=>{this.onOpen();}}>More</Button>
      </View>
    );
  }
}

Answer 1

你不能使用＆＃39;这个＆＃39;类Component之外的关键字。你不能从课外改变组件的状态。

此处有更多详情： Change state Outside Component

此外，如果要更改类外部组件的状态，请使用redux状态。

Redux JS

Answer 2

您的代码存在的问题是，您已在班级外定义onOpen，并且您希望访问该组件的setState功能。我不知道为什么会这样做，因为onOpen属于班级。但是如果你想把这个放在课外。您可以通过以下方式执行此操作：

let onOpen = ({setState}) => {
  //retrieve setState here
  setState({visible:true});
}

export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    }
    // You don't have to do this if onOpen is not in your class
    //this.onOpen = onOpen.bind(this);
  }

  render() {
    //send this.setState to onOpen
    const that = this;

    return (
      <View style={styles.container}>
        <Button onPress={()=>{onOpen({setState: that.setState});}}>More</Button>
      </View>
    );
  }
}

从本机组件的反应中导出函数

2 个答案: