reactjs - 来自 Postgres 数据库的反应复选框
问题描述
我从名为 users 的数据库表中获取一组用户。其中一个字段是默认值为 false 的复选框。我无法更改复选框。当我从静态页面获取数组时,它工作正常,但从数据库获取后无法工作。handleChange 函数是我用来更改复选框的函数。从 componentDidMount 返回的数组是这样的:
{
"id": 455,
"firstname": "Sally",
"lastname": "Sue",
"company": "Baltic Explorations",
"city": "houston",
"phone": "2058231111",
"email": "sally@gmail.com",
"ischecked": false
},
应用程序.js
class App extends Component {
constructor() {
super()
this.state = {
network: [],
networkfilter:[],
suggest:suggest,
searchfield:'',
searchsuggest:'',
route:'signin',
routed:false,
isSignedIn:false,
user: {
id:'',
firstname: '',
lastname: '',
phone:'',
city:'',
email:'',
company:'',
ischecked:false
}
}
this.handleChange=this.handleChange.bind(this);
this.handleClick=this.handleClick.bind(this);
}
componentDidMount() {
fetch('http://localhost:3000/data')
.then(response => response.json())
.then(data => {
this.setState({network:data})})
}
loadUser = (data) => {
this.setState({user: {
id:data.id,
firstname: data.firstname,
lastname: data.lastname,
phone: data.phone,
city:data.city,
email:data.email,
company:data.company,
ischecked:data.ischecked
}})
}
onSearchChange=(event)=> {
this.setState({searchfield:event.target.value})
}
onSuggestChange=(event)=> {
this.setState({searchsuggest:event.target.value})
}
handleChange(id,route) {
const updatedNetwork = network.map(netw => {
if (netw.id===id) {
netw.ischecked = !netw.ischecked
}
return netw
})
return {
network:updatedNetwork
}
}
render() {
const filteredNetwork = this.state.network.filter(netw => {
return netw.lastname.toLowerCase().includes(this.state.searchfield.toLowerCase())
})
const filteredSuggestions = this.state.suggest.filter(sugg => {
return sugg.location.toLowerCase().includes(this.state.searchsuggest.toLowerCase())
})
return (
<div className = "tc">
<Navigation
isSignedIn ={this.state.isSignedIn}
onRouteChange={this.onRouteChange}
routed={this.state.routed}
/>
{
this.state.route==='home' ?
<div>
<h2 className = "ml6">All Network</h2>
<Searchbox
searchChange = {this.onSearchChange}
onRouteChange = {this.onRouteChange}
routed={this.state.routed}
/>
<NetworkArray
network={filteredNetwork}
handleChange = {this.handleChange}
handleClick ={this.handleClick}
selectedCard={this.state.suggest}
onRouteChange = {this.onRouteChange}
/>
</div>
: (
this.state.route==='mynetwork' ? (
<div>
<h2 className = "ml6">My Network</h2>
<Searchbox searchChange = {this.onSearchChange}
/>
}
<MyNetworkArray
handleChange = {this.handleChange}
network = {filteredNetwork}
/>
... moreComponents loaded here removed for brevity
export default App;
卡片组件
import React from 'react';
const Card = (props) => {
return(
<div className = 'pointer bg-light-green dib br3 pa3 ma2 grow shadow-5'
onClick = {() => props.handleClick(props.id)}>
<div>
<h3>{props.name}</h3>
<p>{props.company}</p>
<p>{props.phone}</p>
<p>{props.email}</p>
<p>{props.city}</p>
</div>
<div>
My Network
<input className ="largeCheckbox"
type = "checkbox"
checked={props.ischecked}
onChange={()=> props.handleChange(props.id)}
/>
</div>
</div>
)
}
export default Card;
如何更新复选框,并且当用户登录时,它会跟踪特定用户选中的复选框?
解决方案
handleChange(id, route) {
const updatedNetwork = network.map(netw => {
if (netw.id === id) {
netw.ischecked = !netw.ischecked;
}
return netw;
});
return {
network: updatedNetwork
};
}
network
正如未定义的那样,这应该会给您带来各种错误。您是否有可能使用全局值或导入值来提供虚拟服务器响应,然后忘记将其更改为组件状态?我希望看到对this.state.network
.
推荐阅读
- c# - 准备要从单元测试调用的运行数据库脚本以使用特定的 sql 脚本运行发布
- azure - 在 ADF 中将相似表合并为一个的最佳方法
- python - pySimpleGUI 中大小之间的差异
- powerbi - 为 on-promise 数据网关打开连接
- ios - 如何在博览会中编辑 info.plist?
- c# - 使用 IdentityServer4.AccessTokenValidation 包向 IdentityServer3 授权 .NET 5 Web API 引用令牌时遇到问题
- reactjs - 正确键入 forwardRef 道具的通用接口
- php - Apache 有时会显示 php 代码,除了执行它
- python - 'QuerySet' 对象没有属性 'META' 500(内部服务器错误)
- r - 如何参考r中另一列中的另一个单元格值更改列中的单元格值?