Question

我正在尝试更新React本机组件中的状态。但是它越来越出错，有人可以帮我吗。

我正在使用react-native-cli版本：2.0.1 反应本色：0.55.4

这是我的代码：

import React, { Component } from 'react'

import {
    Button,
    Text,
    View,
} from 'react-native';

export class ToggleButton extends Component {

    state = {
        isDone: false
    };

    onAction() {
        const value = !this.state.isDone;
        this.setState({ isDone: value });

        const newValue = this.state.isDone;
        console.log(newValue);
    }

    render() {
        return (
            <View>
                <Button
                    title="Action"
                    onPress={this.onAction}
                />
            </View>
        )
    }
}

export default ToggleButton;

Answer 1

您有三种不同的解决方案。

在构造函数中绑定函数。
使用实验性的公共类字段语法。
传递lambda来执行功能。

问题是您失去对this的引用，因为该函数不是在原始上下文中执行的，所以this.setState不是函数，而是未定义的函数。

在此页面中，提供了所有方法的示例：https://reactjs.org/docs/handling-events.html

Answer 2

更改

    onPress={this.onAction}

到

    onPress={this.onAction.bind(this)}

检查：this

Answer 3

下面是解决方法

import React, { Component } from 'react'

    import {
        Button,
        Text,
        View,
    } from 'react-native';

    export class ToggleButton extends Component {
       // Add state in constructor like this
      constructor(props){
        super(props);
        this.state = {
            isDone: false
        };
      }

        onAction() {
            const value = !this.state.isDone;
            this.setState({ isDone: value });

            const newValue = this.state.isDone;
            console.log(newValue);
        }

        render() {
            return (
                <View>
                    <Button
                        title="Action"
                        // Add function with onPress
                        onPress={() => this.onAction}
                    />
                </View>
            )
        }
    }

    export default ToggleButton;

反应本机设置状态不起作用

3 个答案: