gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 23:19:20 25 4
gpt4 key购买 nike

我是 React 和 React-native 的新手,我很难理解我应该如何更新返回方法中的变量。

目前这是我的代码

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 该按钮,则测试变量已更新。我猜这里缺少一些基本的东西。任何帮助表示赞赏。

最佳答案

你的范围不正确,你应该使用 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 使用,因为它会调用当前组件的本地状态。

如果您需要使用来自父组件状态的值,您可以将其传递给子组件。那时它变成了 child 的 Prop ,可以通过 this.props

访问

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

随着您的应用程序的增长,传递状态更改函数的过程变得越来越复杂,我建议使用像 Redux 这样的库通过操作和缩减程序来管理应用程序状态。学习曲线陡峭,但一旦您掌握了这种改进的通量方法,您就会想知道没有它您是如何生活的。

关于javascript - 在 react-native 中更新 return() 中的变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51337791/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com