代码之家 › 专栏 › 技术社区 › rfii AskNilesh

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

react-native

0

rfii AskNilesh · 技术社区 · 5 年前

我被下面的bug难住了,或者我不明白为什么我的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)
  }

0 回复 | 直到 5 年前

1

2

jnpdx 5 年前

setTimeout 接受两个参数:回调和时间间隔。打电话 setTimeout(1000)
this.setState 不应该被叫进来 constructor --构造函数中的状态应该由 this.state = 就像你上面说的那样
此.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/>;
  }
}

零食示例: https://snack.expo.io/4kVsJHJ0d

本州= 可以看到状态为空
一个回调函数,间隔1秒
以箭头函数作为回调函数。您可以看到,在它运行之后,它调用自己的回调函数,该函数将打印更新的状态。