Question

正在尝试显示基于用户按钮单击的每个用户记录。

检查条件是，如果“用户”状态为true，则单击按钮时显示结果。如果为False，则单击按钮后删除结果。

这是我的问题，如果仅单击一个用户，而不是显示该用户的特定全名，它只会显示所有用户的所有全名。我认为用户ID冲突。有人可以帮我吗？

我需要根据ID依次显示该用户的用户全名。

这是代码

import React, { Component, Fragment } from "react";
import { render } from "react-dom";


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      arr: [],
    };
  }


  componentDidMount() {
    this.setState({
      arr: [
    {   userid:1, username: "user1", fullname: "James Moon",    Status: false},
    {   userid:2, username: "user2", fullname: "Bebeto Carlos", Status: false},
    {   userid:3, username: "user3", fullname: "John snow",     Status: false},
    {   userid:4, username: "user4", fullname: "Michael Owen",  Status: false}
      ]
    });

  }


// Check if Users status is true display result on button click. If False remove result on button click.
checkUserStatus = (id) => {
//checkUserStatus = function(id) {

if (this.state.arr[0].Status == true) {
    this.state.arr[0].Status = false;
 this.setState({checkstate: this.state.arr[0].Status});

    } else {
     this.state.arr[0].Status = true;
 this.setState({checkstate: this.state.arr[0].Status});
    }
  }



  render() {
const {id} = this.state;
    return (
      <span>
        <label>
          <ul>


            {this.state.arr.map((user, index) => (

<li key={index} onClick={() => this.checkUserStatus(this, index)}>
                {user.username}
                <br />

              </li>
            ))}




{this.state.arr.map((stat, index) => {

//this.state.arr.filter();
//this.state.arr.find();

if (this.state.checkstate == true) {

          return (
            <div key={index}>
       <div  >       
 {stat.Status}: {stat.fullname} 
            </div>
              </div>
          )


  }
        })}

          </ul>
        </label>
      </span>
    );
  }
}

Answer 1

据我所知，您需要执行以下操作：单击用户时，将显示全名，而当用户再次单击同一元素时，将隐藏全名。是您所需要的，必须遵循以下步骤。

class App extends Component {
  constructor() {
    super();
    this.state = {
      arr: [],
    };
  }
   componentDidMount() {
    this.setState({
      arr: [
        {   userid:1, username: "user1", fullname: "James Moon",    Status: false},
        {   userid:2, username: "user2", fullname: "Bebeto Carlos", Status: false},
        {   userid:3, username: "user3", fullname: "John snow",     Status: false},
        {   userid:4, username: "user4", fullname: "Michael Owen",  Status: false}
      ]
    });

  }

checkUserStatus = (e) => {
  const id = e.target.dataset.id;
  let arrClone = this.state.arr.map(item => ({...item}) ); 
  arrClone.filter(ele => ele.userid === parseInt(id) ? ele.Status =  ele.Status ? !ele.Status : true :  ele.Status = false)
  this.setState({ arr: arrClone });
}


 render() {
    return (
      <span>
        <label>
          <ul>
            {this.state.arr.map((user, index) => (
              <li key={user.userid} data-id={user.userid} onClick={this.checkUserStatus}>
                {user.username}
                <br />
              </li>
            ))}
            {this.state.arr.map((stat, index) => {
              return (
                stat.Status ? // show only status true item
                <div key={index}>
                    <div  >       
                        <span> {stat.username}: {stat.fullname} </span>
                </div>
                  </div> : null
              )
            })}
          </ul>
        </label>
      </span>
    );
  }
}

demo code希望对您有所帮助。

Answer 2

在我的立场下，您想显示单击该按钮的用户的全名。

为此，您可以创建一个函数来处理当前用户。

   this.state = {
          currentUser: {
            fullname:''
                       }
            };

您可以修改

    {this.state.arr.map((user, index) => (
<li key={index} onClick={() => this.handleCurrentUser(this, user)}>
                {user.username}
                <br />
              </li>
            ))}

之后创建一个函数

handleCurrentUser(this, user) {
    this.state.currentUser = user;
    this.setState({currentUser: this.state.currentUser})
}

现在您可以使用

进行渲染

     return (
            <div key={index}>
       <div  >       
 {this.state.currentUser.fullname} 
            </div>
              </div>
          )

希望这会有所帮助。

为什么Reactjs一次显示所有用户全名

2 个答案: