来自 Postgres 数据库的反应复选框

Question

我从名为 users 的数据库表中获取一组用户。其中一个字段是默认值为 false 的复选框。我无法更改复选框。当我从静态页面获取数组时，它工作正常，但从数据库获取后无法工作。 handleChange 函数是我用来更改复选框的函数。从componentDidMount返回的数组是这样的：

{
 "id": 455,
    "firstname": "Sally",
    "lastname": "Sue",
    "company": "Baltic Explorations",
    "city": "houston",
    "phone": "2058231111",
    "email": "sally@gmail.com",
    "ischecked": false
},

App.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;

如何更新复选框，并且当用户登录时，它会跟踪特定用户选中的复选框？

Answer 1

  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 的引用。