React -我如何添加新的值到一个数组，并在警报窗口显示这个数组?

Question

我正在写一个非常简单的程序，但是我有一个小问题。当我在输入标签中写入一个新的预兆时，我想把它添加到处于状态的数组中，并在警告框中显示数组的整个内容。我怎样才能用最简单的方法做呢?

class Draw extends React.Component {
state = {
omen: "",
omens: ["first", "second", "third"],
newOmen: "",
};
handleRandomOmen = () => {
const omensArray = this.state.omens;
const randomOmen =
omensArray[Math.floor(Math.random() * omensArray.length)];
this.setState({
omen: randomOmen,
});
};
handleChange = (e) => {
this.setState({
newOmen: e.target.value,
});
};
handleAddOmen = () => {
const test = this.state.omens.push(this.state.newOmen);
console.log(test);
};
render() {
return (
<div className="app">
<button onClick={this.handleRandomOmen}>Show omen</button>
<br />
<input
type="text"
value={this.state.newOmen}
onChange={this.handleChange}
/>
<button onClick={this.handleAddOmen}>Add omen</button>
<h1>{this.state.omen}</h1>
</div>
);
}
}
ReactDOM.render(<Draw />, document.getElementById("root"));

Answer 1

你总是需要用setState来更新状态，使用push添加新的数组值将被下一个反应循环覆盖。

你可以使用你的扩展语法用旧值和你的新值创建一个新的数组:

handleAddOmen = () => {
this.setState({
omens: [
...this.state.omens,
this.state.newOmen
]
});
};