使用状态

Question

可能是一个简单的问题，有一个简单的答案，但我无法弄清楚。怪火。 当我希望模拟器说“已更改”时，我的模拟器会在屏幕上打印“这是测试”。我在做什么错了？

export class Hole {
   constructor(public id: number, public name: string, public lat: number,public lng: number) { }
 }
 const HOLES = [
new Hole(1, 'Hole 1', 1234567, -12345324)
];

Answer 1

使用状态

您正在使用类属性，当更改时，女巫不会触发重新渲染。在做出反应时，组件将在收到新道具或状态改变时重新渲染（也可以强制渲染，但最好不要这样做）。

使用状态触发重新渲染的示例

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Template from './src/components/Template';

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state ={foo: "this is a test"};
    }

    changeMe = () => {
        this.setState({foo:'changed'})
    }

    componentDidMount(){
        this.changeMe();
    }

    render() {
        return (
            <Template foo={this.state.foo} />
        );
    }
}

在将新道具传递到组件时，它也会重新渲染（除非您实现componentShouldUpdate）。

状态说明

因此，在react组件内部，您在this.state中有一个本地状态对象，可以在this.state = {bar: 'foo'};之类的构造函数中进行设置。构造函数设置状态后，只能使用this.setState()方法进行更改。

使用setState更改状态后，组件将使用更新后的值重新呈现。

该状态在组件外部不可用，至少不能作为this.state来使用，因为它将调用当前组件的本地状态。

如果您需要使用父组件状态中的值，可以将其传递给子组件。到那时，它成为孩子可以接触的道具 this.props

要从子组件更改状态值，应将一个函数传递给子组件，以更改父组件的状态。

随着应用程序的增长，传递状态更改功能的过程变得越来越复杂，我建议使用Redux之类的库通过动作和化简器管理应用程序状态。学习曲线很陡峭，但是一旦掌握了这种改进的通量方法，您会想知道如果没有它，您将如何生活。

获取更改的变量以显示在`render`中

1 个答案:

使用状态

使用状态触发重新渲染的示例

状态说明