Question

我正在从JSONPlaceholder API提取一些虚假数据以进行原型制作。我正在从获取的数组中为每个项目在HTML表中呈现数据。最初，我仅在页面视图上显示少量属性（ID，名称，用户名，电子邮件），然后JSON响应附带了更多属性。我想单击特定项目时，在我的情况下，我使用的是openDetails方法，以html模式显示其余的对象数据。我将从Material UI或Bootstrap中实现模态，所以这不是问题，只是不知道如何捕获单击项的ID，因此我只能从自己的状态中找到该特定对象，并以HTML模态显示其详细信息。 / p>

这是代码：

class User extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
      filteredUsers: [],
      s: ""
    };
  };
  componentDidMount() {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then(response => {
        this.setState({ users: response.data });
        this.setState({ filteredUsers: response.data });
      })
      .catch(error => {
        console.log(error);
      });
  };
  componentWillReceiveProps = nextProps => {
    this.setState(
      {
        users: nextProps.users,
        filteredUsers: nextProps.users
      },
      () => this.filterList()
    );
  };
  searchList = e => {
    const s = e.target.value.toLowerCase();
    this.setState({ s }, () => this.filterList());
  };
  filterList = () => {
    let users = this.state.users;
    let s = this.state.s;

    users = users.filter(function(user) {
      return user.name.toLowerCase().indexOf(s) !== -1;
    });
    this.setState({ filteredUsers: users });
  };
  openDetails = id => {
    console.log(id);
  };

  renderTableData() {
    return this.state.filteredUsers.map((user, index) => {
      const { id, name, username, email } = user;
      return (
        <tr key={index}>
          <td>{id}</td>
          <td style={{ cursor: "pointer" }} onClick={this.openDetails(id)}>
            {name}
          </td>
          <td>{username}</td>
          <td>{email}</td>
        </tr>
      );
    });
  }

  render() {
    return (
      <div>
        <NavBar></NavBar>
        <input
          type="text"
          placeholder="Search users"
          onChange={this.searchList}
          value={this.state.s}
        ></input>

        <table id="users">
          <tbody>
            <tr>
              <th>ID</th>
              <th>NAME</th>
              <th>USERNAME</th>
              <th>EMAIL</th>
            </tr>
            {this.renderTableData()}
          </tbody>
        </table>
      </div>
    );
  }

Answer 1

使用正确的箭头功能实现以支持参数。

<td style={{ cursor: "pointer" }} onClick={this.openDetails(id)}></td>

openDetails = id => e => {
  console.log(id)
}

最好不要创建嵌入式箭头功能-() => this.openDetails(id)，因为它将在每次重新渲染时重新创建其实例。

希望有帮助！

Answer 2

@tarzen ...我正在这样做，但是没有运气，将其设置为状态后无法控制台注销

openDetails = id => e => {
    let user = this.state.filteredUsers.find((user) => {
      return user.id === id;
    });
    this.setState({user: user})
    console.log(this.state.user)
  }

这里是状态

constructor(props) {
    super(props);
    this.state = {
      users: [],
      filteredUsers: [],
      s: "",
      user: {}
    };
  }

最后是html数据应该到达的位置：

<div className="modal-body">
</div>

Answer 3

//在这里进行更改，您需要调用以下函数来访问ID

  
   <td style={{ cursor: "pointer" }} onClick= {()=>this.openDetails(id)}>
    {name}
  </td>

如何基于其属性ID从数组中获取特定项目/对象的详细信息-React

3 个答案: