Question

为什么它只显示数组的最后一个值，而不是整个？更新数据库中的值时，更新数据库中的值时，将输出所有

constructor(props) { 
    super(props); 
    this.name = this.props.name; 
    this.state = {[this.name] : []}; 
} 

componentDidMount() { 
    let cardQuantity = 
    firebase.database().ref("Users").child(this.name); 

    cardQuantity.on('value',snap => { 

        snap.forEach((childSnapshot)=> { 

            let card = {text: childSnapshot.val(), id: childSnapshot.key}; 

            this.setState({[this.name] :[card].concat(this.state[this.name])}); 
        });
    }); 
} 

render(){ 

    return ( 
        this.state[this.name].map( card => <h2 key={card.id}>{card.text}</h2>) 
    );
}

Answer 1

setState()是异步的，因此您必须使用setState的回调形式，如下所示：

this.setState(prevState => ({
  [this.name]: [card].concat(prevState[this.name])
}));

演示：https://codesandbox.io/s/zrq0xxq2px

根据您的代码显示2个版本：

使用setState的回调形式并显示整个列表的固定版本
基于您的代码的不固定版本，仅显示数组的最后一个元素

来自官方React's documentation：

如果下一个状态取决于之前的状态，我们建议使用更新程序功能形式，而不是......

为什么它只显示数组的最后一个值，而不是整个？

1 个答案: