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

Question

谁能帮我解释一下如何在这个组件中设置另一个 state：

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' }}>

基本上我想设置另一个 state 像：

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

然后使用 setter setSelectedAtt 来获取 onclick function 上的律师数据，如下所示：

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

然后从那里我将使用 state selectedAtt 来显示有关点击律师的点击传递数据的信息 window。

但是我收到错误：无法在 class 组件中调用 React Hook "useState"。 必须在 React function 组件或自定义 React Hook function 中调用 React Hooks

我可以在 this.state 中使用多个状态吗？ 我想我只是不确定如何在组件 class 中使用多个状态。 任何建议都会很棒

Answer 1

使用 react class 组件，您可以编写自己的 state 设置器，其扩展语法可以复制以前的 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>;
  }