状态变量更新后 React 本机视图无法刷新

Question

我是 React 的新手，在 .我期待视图应该显示

"Hello World!Shyam"

但它只显示“Hellow World”。

我的代码：

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class WhatsDes extends Component {
  constructor(props) {
                super(props);
                this.state = {name:'', email:''};
            }
  
  
  render() {
      console.log('Start render ....');
      const url = 'http://192.168.1.13:8091/employees';  
      fetch(url)
        .then(response => response.json())
        .then(responseJson => {
          console.log('ok 1: '+ JSON.stringify(responseJson));
          console.log('ok 2: '+responseJson[0].name);
          this.state.name = responseJson[0].name;
        })
        .catch(error => {
          console.log('error' +error);
        });  
    console.log('Show view ...' );
    console.log('this.state.name ...' + this.state.name);
    return (
      
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world ! {this.state.name}</Text>
      </View>
    );
  }
}

日志输出：

LOG  Running "WhatsDes" with {"rootTag":201}
 LOG  Start render ....
 LOG  Show view ...
 LOG  this.state.name ...
 LOG  ok 1: [{"name":"Shyam","email":"shyamjaiswal@gmail.com"},{"name":"Bob","email":"bob32@gmail.com"},{"name":"Jai","email":"jai87@gmail.com"}]
 LOG  ok 2: Shyam

Answer 1

不改变状态。如果要更新状态，请使用 setState 方法。

更改您的状态更新，

this.state.name = responseJson[0].name;

至

this.setState({name: responseJson[0].name});

在 https://reactjs.org/docs/react-component.html#setstate

阅读有关 setState 的更多信息

编辑：经过仔细检查，发现您的代码中还有一些 no no。

您正在 render 函数内执行所有这些操作。这不是正确的做法。

将您的 API 调用移至 componentDidMount 函数，该函数只会在您的组件挂载时执行。像现在一样在 render 中执行此操作将在每个渲染器上重复调用该函数并将抛出错误 Max callstack exceeded.

将您的代码更改为，

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class WhatsDes extends Component {
  
  constructor(props) {
    super(props);
    this.state = {name:'', email:''};
  }
   
  componentDidMount() {
    const url = 'http://192.168.1.13:8091/employees';  
    fetch(url)
      .then(response => response.json())
      .then(responseJson => {
        this.setState({ name: responseJson[0].name });
      })
      .catch(error => {
        console.log('error' +error);
    });
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world ! {this.state.name}</Text>
      </View>
    );
  }
}

浏览一下 Life cycle events - React

或许是个好主意

状态变量更新后 React 本机视图无法刷新

React native view fails to refresh after the state variable updated

web-services

react-native