Question

我在这里有一个非常简单的React Native示例。我对React Native（以及React）还很陌生。

我的状态为变量text1。

使用“日志数据”按钮将其记录到控制台。

通过按钮“更改数据”将其设置为当前时间字符串。

如果输入完成，它将获取该数据。

text1的内容显示在文本元素中。

import React from 'react';
import { StyleSheet, Text, View, Button, Alert,TextInput} from 'react-native';


export default class App extends React.Component 
{
    constructor(props) 
    {
        super(props);
        this.state = {text1: 'initial'};
    }

    setVal () 
    {
        this.setState (st => {st.text1 = new Date ().toString ()});
        //this.forceUpdate ();
    }

    render()
    {
        return (
            <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1}}>
            <Text style={{fontSize: 30, margin: 40}}>text1 is {this.state.text1}</Text>


            <Button
                onPress={
                            () => {console.log("text1=" + this.state.text1);
                        }}
                title="log data"
                color="green"
            />

            <Button
                onPress={this.setVal.bind (this)}
                title="change data"
                color="orange"
            />


           <TextInput
                style={{height: 40, width: 200, margin: 30, borderColor: 'grey', borderWidth: 2}}
                onChangeText={str => this.setState({text1: str})}
                value={this.state.text1}
            />
      </View>
    );
  }
}

如果我通过输入更改了text1，则Text-Element将立即更新。如果不是通过“更改数据”按钮而不调用foreceUpdate，则不是这种情况。

我认为setState将自动执行更新和渲染。 ???

那是为什么

Answer 1

setState要求您返回一个将合并到当前状态的新对象。根据文档：

[状态参数]不应直接突变。相反，更改应通过根据状态和道具的输入来构建新对象来表示。（...）更新程序的输出与state进行了浅层合并。

因此，您不应更改st参数，而应返回一个对象：

this.setState({ text1: new Date().toString() });

React Native：没有forceUpdate的更新？

1 个答案: