this.setState 的正确写法

React Native 的 this.setState 同微信小程序的 this.setData 很类似，但是呢，写法却不一样，注意别混淆了
最简单的写法 —— 写法六
同小程序一致的写法 —— 写法五

setState 函数是异步执行的函数

写法一

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    View,
    Text,
    TextInput,
    PixelRatio,
} from 'react-native';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            inputedNum: '',//写法1
        };
    }

    updateNum(newText) {//写法1
        this.setState((state) => {
            return {
                inputedNum: newText
            };
        });
    }

    render() {

        return (
            <View style={styles.container}>
                {/*写法1*/}
                <TextInput placeholder={'请输入账号'} onChangeText={(newText) => this.updateNum(newText)}/>
                <Text>您输入的手机号：{this.state.inputedNum}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

写法二

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    View,
    Text,
    TextInput,
    PixelRatio,
} from 'react-native';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            inputedPW: ''//写法2
        };
        this.updatePW = this.updatePW.bind(this);//写法2
    }

    updatePW(newText) {//写法2
        this.setState(() => {
            return {
                inputedPW: newText
            };
        });
    }

    render() {

        return (
            <View style={styles.container}>
                {/*写法2*/}
                <TextInput placeholder={'请输入密码'} secureTextEntry={true} onChangeText={this.updatePW}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

上述2种写法，请根据写法1 或写法2 的几处注意点，查看写法

setState 函数的原型

setState(oldState, callback)

如下例

updateNum(newText) {
        this.setState((oldState) => {
            //可以查看下oldState有哪些值
            for (let index in oldState) {
                console.log("index = ", index);
                console.log("value = ", oldState[index]);
            }
            return {
                inputedNum: newText,
                addedParam: 'I\'m a new added variable'
            }
        }, this.changeNumDone);
    }
    //自定义回调
    changeNumDone() {
        console.log('React Native has changed inputed Num，and has added a new variable');
    }

注意到上例中的 addedParam 了么

return {
  inputedNum: newText,
  addedParam: 'I\'m a new added variable'
}

这样动态的新增 state 变量，而不必在 this.state 里初始化，React Native 允许这种写法，但个人建议，最好把用到的变量提到 this.state 中，方便维护该组建中用到的变量管理，免得在维护时需要修改，漏掉某些变量

写法三

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    View,
    Text,
    TextInput,
    PixelRatio,
} from 'react-native';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            inputedNum: '',//写法3
        };
    }

    updateNum(inputedNum) {//写法3
        this.setState(() => {
            return {inputedNum};
        });
    }

    render() {

        return (
            <View style={styles.container}>
                {/*写法3*/}
                <TextInput placeholder={'请输入账号'} onChangeText={(newText) => this.updateNum(newText)}/>
                <Text>您输入的手机号：{this.state.inputedNum}</Text>
                <Text>您输入的手机号的长度：{this.state.inputedNum.length}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

写法四

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    View,
    Text,
    TextInput,
    PixelRatio,
} from 'react-native';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            inputedNum: '',//写法4
        };
    }

    updateNum(inputedNum) {//写法4
        this.setState({inputedNum});
    }

    render() {

        return (
            <View style={styles.container}>
                {/*写法4*/}
                <TextInput placeholder={'请输入账号'} onChangeText={(newText) => this.updateNum(newText)}/>
                <Text>您输入的手机号：{this.state.inputedNum}</Text>
                <Text>您输入的手机号的长度：{this.state.inputedNum.length}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

写法五（这个写法同微信小程序一致）

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    View,
    Text,
    TextInput,
    PixelRatio,
} from 'react-native';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            inputedNum: '',//写法4
        };
    }

    updateNum(inputedNum) {//写法4
        this.setState({
          inputedNum: inputedNum
        });
    }

    render() {

        return (
            <View style={styles.container}>
                {/*写法4*/}
                <TextInput placeholder={'请输入账号'} onChangeText={(newText) => this.updateNum(newText)}/>
                <Text>您输入的手机号：{this.state.inputedNum}</Text>
                <Text>您输入的手机号的长度：{this.state.inputedNum.length}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

写法六

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    View,
    Text,
    TextInput,
    PixelRatio,
} from 'react-native';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            inputedNum: '',//写法5
        };
    }

    render() {

        return (
            <View style={styles.container}>
                {/*写法5*/}
                <TextInput placeholder={'请输入账号'} onChangeText={(inputedNum) => this.setState({inputedNum})}/>
                <Text>您输入的手机号：{this.state.inputedNum}</Text>
                <Text>您输入的手机号的长度：{this.state.inputedNum.length}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

this.setState 的正确写法

猜你喜欢