ReactJS-如何在数据处于状态时填充单个实体数据

我在自学。我有一个组件，如下所示：

import axios from "axios";
import React from "react";

class PersonList extends React.Component {
  state = {
    users: [],
  };

  componentDidMount() {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((response) => {
        // handle success
        let thedata = response.data;
        this.setState({ users: thedata });
        console.log(thedata);
      })
      .catch((error) => {
        // handle error
        console.log(error);
      });
  }

  handleChange(event) {
    alert("You selected User with ID :: " + event.target.value);
  }

  render() {
    return (
      <>
        <strong>Select A User : </strong>
        <select onChange={this.handleChange}>
          <option value="" defaultValue>
            -SELECT-
          </option>
          {this.state.users.map((user) => (
            <option key={user.id} value={user.id}>
              {user.name}
            </option>
          ))}
        </select>
        <p>????????????</p>
      </>
    );
  }
}

export default PersonList;

从“axios”导入axios；
从“React”导入React；
类PersonList扩展了React.Component{
状态={
用户：[]，
};
componentDidMount（）{
axios
.get（“https://jsonplaceholder.typicode.com/users")
。然后（（响应）=>{
//成功
让data=response.data；
this.setState（{users:thedata}）；
console.log（数据）；
})
.catch（（错误）=>{
//处理错误
console.log（错误）；
});
}
手变（活动）{
警报（“您选择的用户ID:：”+event.target.value）；
}
render（）{
返回(
选择一个用户：
-挑选-
{this.state.users.map（（user）=>(
{user.name}
))}
什么

);
}
}
导出默认个人列表；

我想做的是，当我选择（这意味着一旦更改）下拉列表时，我想在下拉列表的正下方显示该用户的详细信息。我试图避免为相同的功能编写一个单独的组件，我将进行另一个rest调用以获取每个用户的详细信息

---

但与此同时，我感到迷惘，因为我不知道-我应该在这里用我的

标记（在reder方法中）来显示所选用户的详细信息。

您可以将所选用户存储在状态中，为了显示用户详细信息，您需要显示一个信息列表，例如：

import axios from "axios";
import React from "react";

class PersonList extends React.Component {
  state = {
    users: [],
    selectedUser: null
  };

  componentDidMount() {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((response) => {
        // handle success
        let thedata = response.data;
        this.setState({ users: thedata });
        console.log(thedata);
      })
      .catch((error) => {
        // handle error
        console.log(error);
      });
  }

  handleChange(event) {
    setState({selectedUser: event.target.value})
  }

  render() {
    let user = null
    const {selectedUser} = this.state
    if(selecteduser) {
          user = (<p>User id: {selecteduser.id}</p><br/><p>name: {selectedUser.name}</>)
    }
    return (
      <>
        <strong>Select A User : </strong>
        <select onChange={this.handleChange}>
          <option value="" defaultValue>
            -SELECT-
          </option>
          {this.state.users.map((user) => (
            <option key={user.id} value={user}> //change user.id to user
              {user.name}
            </option>
          ))}
        </select>
        {user}
      </>
    );
  }
}

export default PersonList;

从“axios”导入axios；
从“React”导入React；
类PersonList扩展了React.Component{
状态={
用户：[]，
selectedUser:null
};
componentDidMount（）{
axios
.get（“https://jsonplaceholder.typicode.com/users")
。然后（（响应）=>{
//成功
让data=response.data；
this.setState（{users:thedata}）；
console.log（数据）；
})
.catch（（错误）=>{
//处理错误
console.log（错误）；
});
}
手变（活动）{
setState（{selectedUser:event.target.value}）
}
render（）{
让user=null
const{selectedUser}=this.state
如果（选择用户）{
user=（user id:{selecteduser.id}

name:{selecteduser.name}）
}
返回(
选择一个用户：
-挑选-
{this.state.users.map（（user）=>(
//将user.id更改为user
{user.name}
))}
{user}
);
}
}
导出默认个人列表；

---

如果您想编写干净的代码，可以创建一个名为UserDetails的组件，将用户作为道具。

您可以将所选用户存储在状态中，为了显示用户详细信息，您将需要显示一个信息列表，例如：

import axios from "axios";
import React from "react";

class PersonList extends React.Component {
  state = {
    users: [],
    selectedUser: null
  };

  componentDidMount() {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((response) => {
        // handle success
        let thedata = response.data;
        this.setState({ users: thedata });
        console.log(thedata);
      })
      .catch((error) => {
        // handle error
        console.log(error);
      });
  }

  handleChange(event) {
    setState({selectedUser: event.target.value})
  }

  render() {
    let user = null
    const {selectedUser} = this.state
    if(selecteduser) {
          user = (<p>User id: {selecteduser.id}</p><br/><p>name: {selectedUser.name}</>)
    }
    return (
      <>
        <strong>Select A User : </strong>
        <select onChange={this.handleChange}>
          <option value="" defaultValue>
            -SELECT-
          </option>
          {this.state.users.map((user) => (
            <option key={user.id} value={user}> //change user.id to user
              {user.name}
            </option>
          ))}
        </select>
        {user}
      </>
    );
  }
}

export default PersonList;

    try this if i understood it right 
    
    
    
    class PersonList extends React.Component {
  state = {
    users: [],
    selectedUser: {},
  };

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(res => {
        this.setState({ users: res });
      })
      .catch(error => {
        // handle error
        console.log(error);
      });
  }

  handleChange(event) {
    this.setState({ selectedUser: this.state.users.find(item => item.id == event.target.value) });
  }

  render() {
    return (
      <>
        <strong>Select A User : </strong>
        <select onChange={this.handleChange.bind(this)}>
          {this.state.users &&
            this.state.users.map(user => (
              <option key={user.id} value={user.id}>
                {user.name}
              </option>
            ))}
        </select>
        <p>{this.state.selectedUser.name}</p>
      </>
    );
  }
}

export default PersonList;

从“axios”导入axios；
从“React”导入React；
类PersonList扩展了React.Component{
状态={
用户：[]，
selectedUser:null
};
componentDidMount（）{
axios
.get（“https://jsonplaceholder.typicode.com/users")
。然后（（响应）=>{
//成功
让data=response.data；
this.setState（{users:thedata}）；
console.log（数据）；
})
.catch（（错误）=>{
//处理错误
console.log（错误）；
});
}
手变（活动）{
setState（{selectedUser:event.target.value}）
}
render（）{
让user=null
const{selectedUser}=this.state
如果（选择用户）{
user=（user id:{selecteduser.id}

name:{selecteduser.name}）
}
返回(
选择一个用户：
-挑选-
{this.state.users.map（（user）=>(
//将user.id更改为user
{user.name}
))}
{user}
);
}
}
导出默认个人列表；

如果您想编写干净的代码，您可以创建一个名为UserDetails的组件，将用户作为道具。

如果我理解正确，请尝试一下
    try this if i understood it right 
    
    
    
    class PersonList extends React.Component {
  state = {
    users: [],
    selectedUser: {},
  };

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(res => {
        this.setState({ users: res });
      })
      .catch(error => {
        // handle error
        console.log(error);
      });
  }

  handleChange(event) {
    this.setState({ selectedUser: this.state.users.find(item => item.id == event.target.value) });
  }

  render() {
    return (
      <>
        <strong>Select A User : </strong>
        <select onChange={this.handleChange.bind(this)}>
          {this.state.users &&
            this.state.users.map(user => (
              <option key={user.id} value={user.id}>
                {user.name}
              </option>
            ))}
        </select>
        <p>{this.state.selectedUser.name}</p>
      </>
    );
  }
}

export default PersonList;

类PersonList扩展了React.Component{
状态={
用户：[]，
已选择用户：{}，
};
componentDidMount（）{
取（'https://jsonplaceholder.typicode.com/users')
.then（response=>response.json（））
。然后（res=>{
this.setState（{users:res}）；
})
.catch（错误=>{
//处理错误
console.log（错误）；
});
}
手变（活动）{
this.setState（{selectedUser:this.state.users.find（item=>item.id==event.target.value）}）；
}
render（）{
返回(
选择一个用户：
{this.state.users&&
this.state.users.map（user=>(
{user.name}
))}
{this.state.selectedUser.name}

);
}
}
导出默认个人列表；

如果我理解正确，试试这个
类PersonList扩展了React.Component{
状态={
用户：[]，
已选择用户：{}，
};
componentDidMount（）{
取（'https://jsonplaceholder.typicode.com/users')
.then（response=>response.json（））
。然后（res=>{
this.setState（{users:res}）；
})
.catch（错误=>{
//处理错误
console.log（错误）；
});
}
手变（活动）{
this.setState（{selectedUser:this.state.users.find（item=>item.id==event.target.value）}）；
}
render（）{
返回(
选择一个用户：
{this.state.users&&
this.state.users.map（user=>(
{user.name}