<option> 除非我切换字段，否则不会显示将动态添加到选择

Question

我希望能够动态添加组成员，我只是为此使用了+按钮。问题是 - 它添加了提示的输入值，但除非我切换字段并键入其他内容，否则我看不到它。 以下是YouTube链接，以便更好地理解： https://youtu.be/sA0WB2Le3Fg

<button id="add" type="button" onClick={(e)=>this.addMember(e)}>+</button>

状态 ：

members: [
{member:"Berin"},
{member:"Cristian"},
{member:"Raddy"},
{member:"Ventsislav"},
]

函数：

addMember = (e) => {
let input = prompt("Enter the name");
this.state.members.push({member:input});
e.preventDefault();
}

映射功能：

let members = this.state.members.map((member,index)=>{
return <option value={member.member} key={index}>{member.member}</option>
})

选择字段 ：

<select id="groupMember" onChange={this.changeMember} name="member" required>
<option defaultValue="" selected disabled>Select group member</option>
{members}
</select>

Answer 1

试试这个：

addMember = (e) => {
let input = prompt("Enter the name");
let newMemberList = this.state.members;
newMemberList.push(input);
this.setState({ members: newMemberList });
e.preventDefault();
}

Answer 2

在后来的 React 版本中推荐的方法如下所示：

addMember = (e) => {
let input = prompt("Enter the name");
this.setState(prevState => ({
members: [...prevState.members, input]
}))
e.preventDefault();
}

Answer 3

谢谢 ！已经找到了解决方案：

addMember = (e) => {
let input = prompt("Enter the name");
let members = this.state.members;
members.push({member:input})
e.preventDefault();
this.setState({
...this.state,
members
})