如何在反应 class 组件中设置另一个 state 以将数据从初始 state 传递到

Question

can anyone help me out and explain how I can set another state in this component:

export class MapContainer extends Component {
  constructor(props) {
    super(props);

  
   
    this.state = {

      attorneys: []

      
    }
  }
  
    componentDidMount() {
        fetch('**********')
        .then((response) => response.json())
        .then(data => {
            this.setState({ attorneys: data });
        });
    }


  displayMarkers = () => {
    
    return this.state.attorneys.map((attorney) => {
      return <Marker key={attorney.id} id={attorney.id} position={{
       lat: attorney.latitude,
       lng: attorney.longitude
       
     }}
     onClick={() => {
     }}
      />
    })
  }
  
  render() { 
    return (
      <div style={{position:'absolute', left: 450
    }}>
        <Map
          google={this.props.google}
          zoom={8}
          style={{width:'50vw', height:'80vh'}}
          initialCenter={{lat: 38.907192, lng: -77.036873}}
          loadingElement={<div style={{height:"100%"}} />} 
          containerElement ={<div style={{height:"100%"}}  />}
           mapElement={<div style={{height:"100%"}}  />}
        >
          {this.displayMarkers()}
        </Map>
        <div style={{position:'relative',top:800, right:200, paddingTop:25}}>
            
            <Link to={``} className="btn btn-sm btn-success mb-2">Add Attorney</Link>
            <input class="form-control" style={{ marginBottom: 15, marginTop: 5 }} id="txt_query" type="text" placeholder="Seach here..." />

            <table className="table table-bordered table-hover table-hover-cursor">
                <thead>
                    <tr >

                        <th  style={{ width: '10%', cursor: "pointer" }}>Attorney Name</th>
                        <th style={{ width: '12%', cursor: "pointer" }}>Email</th>
                        <th style={{ width: '40%' }}>Phone Number</th>
                        <th style={{ width: '40%' }}>Indiviual Address</th>
                        <th style={{ width: '10%' }}>Admitted</th>
                        <th style={{ width: '10%' }}>Practice area</th>
                        <th style={{ width: '10%' }}>Month/Year Joined</th>
                        <th style={{ width: '10%' }}>View</th>
                    </tr>
                </thead>
                <tbody class="searchable">
                    {this.state.attorneys.map((attorney) => 
                        <tr key={attorney.id}>
                            <td>{attorney.name}</td>
                            {/* <td>{case_.case_id}</td> */}
                            <td>{attorney.email}</td>
                            <td> {attorney.phone}</td>
                            <td> {attorney.street_address}</td>
                            <td>
                             {attorney.admitted}
                            </td>
                            <td>{attorney.practice_area}</td>
                            <td>{attorney.month_year_joined}</td>
                            <td style={{ whiteSpace: 'nowrap' }}>

Basically I want to set another state like:

 const [selectedAtt, setSelectedAtt] = useState(null);

to then use the setter setSelectedAtt to grab the attorney data on an onclick function like so:

     onClick={() => {
      setSelectedAtt(attorney);
     }}

then from there I was going to use the state selectedAtt to display an info window on click passing data from the clicked attorney.

However I get the error: React Hook "useState" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function

Can i use multiple states in this.state? I guess I'm just unsure how to use multiple states in a component class. Any advice would be awesome

Answer 1

With react class component, you can write your own state setter with spread syntax which can copy the prvious state.

  constructor(props) {
    super(props);

    this.state = {
      attorneys: [],
      selectedAtt: null,
    };
  }

  setAttorneys = (data) => 
    this.setState((prev) => ({...prev, attorneys: data}));

  setSelectedAtt = (att) =>
    this.setState((prev) => ({...prev, selectedAtt: att}));

  render() {
    console.log(this.state);
    return <div onClick={() => this.setSelectedAtt('test')}>test</div>;
  }