setState之后,React不会重新渲染组件

时间:2019-08-25 17:35:39

标签: javascript reactjs setstate

我有一个奇怪的问题。 state已更新,但组件未重新发送。当我按下按钮Add Hi All时,必须添加其他<p>Hi All</p>。但是我在屏幕上看不到它们。

有趣的部分是,如果我将new_row更改为这样的1元素数组

var new_row = [<p key = {key_number + "d"}> Hi all!</p>];

,然后将使用parag_s.concat(new_row)代替parag_s.push(new_row),一切正常。 state.ps数组的包含在这两个变体中似乎绝对相同,但是当我使用时 parag_s.push(new_row)重新渲染过程未开始。
这就是为什么我觉得自己做错了。你可以帮帮我吗?为什么以下代码不起作用?

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
    render() {
        return (
            <BlablablaComponent/>
        );
    }
}

class BlablablaComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            ps: [],
            keyNumber: 1
        }
        this.addRow = this.addRow.bind(this);
    }

    addRow() {
        var parag_s = this.state.ps;
        var key_number = this.state.keyNumber;
        key_number = key_number + 1;
        var new_row = <p key = {key_number + "d"}> Hi all!</p>;
        parag_s.push(new_row);
        var new_state = {ps: parag_s, keyNumber: key_number};
        this.setState(new_state);
   }

    render() {
        return (
            <div>
                {this.state.ps}
                <button type="button" onClick = {this.addRow} >Add Hi All</button> 
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

1 个答案:

答案 0 :(得分:1)

setState对数组执行浅表比较,当您push进入数组时,实例不变,因此React看不到变化。当您使用concat时,将返回一个新的数组实例。

您可以使用传播运算符而不是concat

 setState({
   key_number,
   parag_s: [...parag_s, new_row]
 })