我有一个奇怪的问题。 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')
);
答案 0 :(得分:1)
setState
对数组执行浅表比较,当您push
进入数组时,实例不变,因此React看不到变化。当您使用concat
时,将返回一个新的数组实例。
您可以使用传播运算符而不是concat
setState({
key_number,
parag_s: [...parag_s, new_row]
})