React native 响应本机更新设置状态即使在延迟后也不发生_React Native

React native 响应本机更新设置状态即使在延迟后也不发生

react-native

React native 响应本机更新设置状态即使在延迟后也不发生,react-native,React Native,我被下面的错误难住了，或者我不理解为什么我的setState更新不起作用。我读到几个问题说setState不是即时的，所以我插入了一些延迟，但这似乎并没有改变问题。为什么我最后的setState调用不起作用 import React, { Component } from 'react'; import { View, Text, FlatList, TextInput, ListItem } from 'react-native'; class SearchFunction extends

我被下面的错误难住了，或者我不理解为什么我的setState更新不起作用。我读到几个问题说setState不是即时的，所以我插入了一些延迟，但这似乎并没有改变问题。为什么我最后的setState调用不起作用

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

class SearchFunction extends Component {
  constructor(props) {
    super(props);
    
    this.state = {  
      data: [],
      value: '',
    };

    this.arrayNew = [
      { name: 'Robert' },
      { name: 'Bryan' },
      { name: 'Vicente' },
      { name: 'Tristan' },
      { name: 'Marie' },
    ];
    
    setTimeout(1000);
    this.setState({data: this.arrayNew}, console.log(this.state));
    setTimeout(1000);
    console.log(this.state)
  }

上面的控制台日志显示数据仍然是[]。而我希望是这样的arrayNew

setTimeout

采用两个参数：回调和时间间隔。调用

setTimeout（1000）

没有任何作用

this.setState

不应该在

构造函数中调用

——构造函数中的状态应该像上面那样由

this.state=

设置

this.setState

的语法不正确——第一个参数是正确的（state对象），但第二个参数应该是回调函数（参见我的示例）

让我们看一个工作函数的示例，其中有一些不同的位置打印状态：

class SearchFunction extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {  
      data: [],
      value: '',
    };

    console.log("Initial state:")
    console.log(this.state)

    this.arrayNew = [
      { name: 'Robert' },
      { name: 'Bryan' },
      { name: 'Vicente' },
      { name: 'Tristan' },
      { name: 'Marie' },
    ];
    
    setTimeout(() => { 
      this.setState({data: this.arrayNew}, () => {
        console.log("Newly set state:")
        console.log(this.state)
      });
    }, 1000);
  }

  render() {
    return <View/>;
  }
}

类搜索函数扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={
数据：[]，
值：“”，
};
log（“初始状态：”）
console.log（this.state）
this.arrayNew=[
{姓名：'罗伯特'}，
{姓名：'布莱恩'}，
{name:'Vicente'}，
{name:'特里斯坦'}，
{姓名：'玛丽'}，
];
setTimeout（（）=>{
this.setState（{data:this.arrayNew}，（）=>{
log（“新设置的状态：”）
console.log（this.state）
});
}, 1000);
}
render（）{
返回；
}
}

零食示例：

在初始

this.state=

之后，可以看到状态为空

setTimeout

带有回调函数，间隔1秒

在回调函数中，使用正确的语法

this.setState

设置状态，并使用箭头函数作为回调函数。您可以看到，在它运行之后，它调用自己的回调函数，该函数将打印更新的状态

setTimeout