状态数组在下一次单击时更新
状态数组在下一次单击时更新
提问于 2019-04-10 22:09:51
我有3个状态值：username、password和address，以及相应的3个文本框，我在其中包含了各自状态中的值。现在，我希望单击submit按钮，将这些状态添加到名为add_data的状态数组中
状态：
this.state = {
uname: '',
pass: '',
address:'',
salary:'',
add_data:[]
}输入：
<div>
<label>username:</label>
<input type="text" noValidate name="uname" onChange={this.changeHandler} />
</div>
<div>
<label>password:</label>
<input type="password" noValidate name="pass" onChange={this.changeHandler} />
</div>
<div>
<label>address:</label>
<textarea noValidate name="address" onChange={this.changeHandler}></textarea>
</div>
<div>
<button onClick={this.submitForm}>Edit</button>
</div>单击并更改函数：
changeHandler = e => {
var adddata_obj;
this.setState({ [e.target.name]: e.target.value })
}
submitForm = () => {
console.log(this.state);
this.setState({
add_data: [...this.state.add_data, { username: this.state.uname, password: this.state.pass, address: this.state.address }]
})
}问题是，当我单击编辑按钮时，add_data数组没有更新。相反，当我在文本框上更改其他内容时，它会显示最后一次单击的edt_data值。请帮帮忙。
回答 2
Stack Overflow用户
发布于 2019-04-11 06:47:27
下面是一个完整的工作代码示例(在这里进行测试：https://codesandbox.io/embed/mq66o03r3j)：
import React from "react";
import {render} from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
uname: "",
pass: "",
address: "",
salary: "",
add_data: []
};
}
changeHandler = e => {
this.setState({[e.target.name]: e.target.value});
};
submitForm = () => {
this.setState({
add_data: [
...this.state.add_data,
{
username: this.state.uname,
password: this.state.pass,
address: this.state.address
}
],
uname: "",
pass: "",
address: "",
salary: ""
});
};
render() {
return (
<div>
<div>
<label>username:</label>
<input
type="text"
name="uname"
onChange={this.changeHandler}
value={this.state.uname}
/>
</div>
<div>
<label>password:</label>
<input
type="password"
name="pass"
onChange={this.changeHandler}
value={this.state.pass}
/>
</div>
<div>
<label>address:</label>
<textarea
name="address"
onChange={this.changeHandler}
value={this.state.address}
/>
</div>
<div>
<button onClick={this.submitForm}>Edit</button>
</div>
<div>
<p>Saved data:</p>
<table>
<tr>
<td>User</td>
<td>Password</td>
<td>Address</td>
</tr>
{this.state.add_data.map(d => (
<tr>
<td>{d.username}</td>
<td>{d.password}</td>
<td>{d.address}</td>
</tr>
))}
</table>
</div>
</div>
);
}
}
const rootElement = document.getElementById("root");
render(<App />, rootElement);现在你可以自己找出你的错误。如果有什么不清楚的地方，请不要犹豫地问我。
Stack Overflow用户
发布于 2019-04-11 07:12:41
您的代码在@user3450590上运行良好，在这里可以看到您的代码片段，只是将add_data呈现为一个列表https://stackblitz.com/edit/state-array-updating-on-next-click。
我唯一更改的是记录状态的位置。setSet是异步的(请参阅here)，如果您需要注销更改，可以将回调作为第二个参数传递给它。
根据@virtusmaior的示例，您还可以将原始值保留在提交表单时可能想要更改的状态。
此外，作为顶部的一个漂亮的小樱桃，你的提交函数将从destructuring中受益。即
submitForm = () => {
console.log(this.state);
this.setState(state => {
const { add_data, ...values } = state;
return {
add_data: [...add_data, { ...values }]
};
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55614684
复制相关文章
相似问题