在 react-native 中更新 return() 中的变量

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从您的 fetch

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

状态说明

所以在 React 组件中，你在 this.state 中有一个本地状态对象，它可以在构造函数中设置，如this.state = {bar: 'foo'}; . 在构造函数设置状态后，它只能使用this.setState()方法进行更改。

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

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

如果您需要使用来自父组件状态的值，您可以将其传递给子组件。 在这一点上，它成为可以通过this.props访问的孩子的道具

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

随着应用程序的增长，传递状态更改函数的过程变得越来越复杂，我建议使用像 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>
    );
  }
}

Answer 3

您可以使用 react useState() 钩子来更新任何变量的值，并且您可以使用 js 的新解构功能。

const Component = () => {
   var [state, setState] = usestate("old value")
   changeState = () => {
    return setstate(state = "new value")
   }
   return (
   <>
   <p>{state}</p>
   <button onclick={changeState}>change</button>
   </>
  )
}