您的范围不正确，您应该使用this.setState导致重新呈现

Question

我对React和React-native来说还很陌生，我正努力了解如何在return方法中更新变量。

当前这是我的代码

import React, { Component } from "react";
import { View, StyleSheet, Platform, Text, Button } from "react-native";

export default class App extends Component<{}> {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick = test => {
    fetch("http://192.168.1.237:3000/thoughts")
      .then(res => res.json())
      .then(res => {
        return (test = JSON.stringify(res));
        return JSON.stringify(res);
      })
      .catch(error => {
        console.error(error);
      });
  };
  componentDidMount() {}

  render() {
    var test = 12314214;

    return (
      <View style={[styles.container]}>
        <Text style={styles.text}>{test}</Text>
        <Button
          onPress={this.handleClick.bind(this)}
          title="Learn More"
          color="#841584"
        />
      </View>
    );
  }
}

我想做的是单击按钮时更新“ {test}”。该按钮有效，如果我在console.log中单击该按钮，则测试变量将更新。我猜这里缺少一些基本的东西。任何帮助表示赞赏。

Answer 1

您的范围不正确，您应该使用this.setState导致重新呈现

而不是让var包含值用途

this.state = {test: '124'}

在构造函数中

然后使用

this.setState({test: value_returned_from_fetch })

从您提取的.then内部

在组件内部的返回级别打印this.state.test

状态说明

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

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

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

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

访问的孩子的道具

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

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

Answer 2

您做错了... 更新反应组件的一种方法是使用setState：https://reactjs.org/docs/react-component.html#setstate

test = 12314214;

class App extends Component {
  state = { test }
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick = event => {
    fetch("http://192.168.1.237:3000/thoughts")
      .then(res => res.json())
      .then(res => {
        // return (test = JSON.stringify(res));
        test = JSON.stringify(res);
        this.setState({ test })
        return test;
      })
      .catch(error => {
        console.error(error);
      });
  };
  componentDidMount() { }

  render() {
    // var test = 12314214;
    const { test } = this.state
    return (
      <View style={[styles.container]}>
        <Text style={styles.text}>{test}</Text>
        <Button
          onPress={this.handleClick.bind(this)}
          title="Learn More"
          color="#841584"
        />
      </View>
    );
  }
}

在react-native中更新return（）中的变量

2 个答案:

您的范围不正确，您应该使用this.setState导致重新呈现

状态说明