React Checkbox из базы данных Postgres - PullRequest
Новая
       39

React Checkbox из базы данных Postgres

0 голосов
/ 10 ноября 2019

Я получаю массив пользователей из таблицы базы данных, которая называется 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;

Как можно обновитьфлажки, и что, когда пользователь входит в систему, он отслеживает флажки, которые конкретный пользователь проверил?

1 Ответ

1 голос
/ 11 ноября 2019 
  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.

...