Javascript 比较对象、复选框检查、编辑复选框

Javascript 比较对象、复选框检查、编辑复选框,javascript,reactjs,Javascript,Reactjs,在以下行中: 我比较两个物体时遇到问题。 将数组peopleChecked->asset->object->user->asset\u id中的属性与数组peopleChecked->asset->object->user->asset\u id中的对象进行比较。 如果来自ArrayOple的id和asset_id,则id==asset_id等于returnstrue。复选框已选中 代码如下: 根据您的数据结构,正确的检查代码语法如下所示: 问题是asset_id缺少正确的键,map返回一个数

在以下行中:

我比较两个物体时遇到问题。 将数组peopleChecked->asset->object->user->asset\u id中的属性与数组peopleChecked->asset->object->user->asset\u id中的对象进行比较。 如果来自ArrayOple的id和asset_id,则id==asset_id等于returnstrue。复选框已选中

代码如下:


根据您的数据结构,正确的检查代码语法如下所示: 问题是asset_id缺少正确的键,map返回一个数组,因此您需要它的索引,但是在您的情况下,您可以简单地将它与person.UserCompetencies进行交换。[0]['asset']['id'],但我保留了您的语法,以防您出于其他目的需要它

  checked={
            this.state.peopleChecked.some(
              ({ asset }) => asset['object']['user']['asset_id'] === person.userCompetences.map(
                (user, index) => user['asset']['id']
              )[0]
          )}
然而,它本质上是复杂的,您应该通过在map函数中放置一些缓存常量来解决它,以跟踪您正在查看的内容。我还建议在第一个映射中引入一些子组件进行渲染,以便将来更容易维护此代码

编辑代码:

class App extends Component {
  constructor() {
    super();
    this.state = {
      people: [
            {
              firstname: "Paul",
              userCompetences: [
                { asset:{ 
                    id: "12345" 
                  }    
                }
              ]
            },
            {
                firstname: "Victor",
                userCompetences: [
                  {  asset: {
                        id: "5646535"     
                    }
                  }
                ]
            },
            {
                firstname: "Martin",
                userCompetences: [
                  {  asset: {
                        id: "097867575675"     
                    }
                  }
                ]
            },
            {
                firstname: "Gregor",
                userCompetences: [
                  {  asset: {
                        id: "67890"     
                    }
                  }
                ]
            }
        ],
       peopleChecked: [   
          {
            amount: 0,
            asset: {
              id: "fgfgfgfg",
              object: {
                  competence: null,
                  id: "dsdsdsdsd",
                  user: {
                      firstname: "Gregor",
                      asset_id: "67890"
                  }
              }
            }
          },
           {
            amount: 0,
            asset: {
              id: "dsdsdsd",
              object: {
                  competence: null,
                  id: "wewewe",
                  user: {
                      firstname: "Paul",
                      asset_id: "12345"
                  }
              }
            }
          },
      ],
      selectPeopleId: []
    }
  }

  /*handleSelect = (person) => {

    //Check if clicked checkbox is already selected
    var found = this.state.peopleChecked.find((element) => {
      return element.id == person.id;
    });

    if(found){
      //If clicked checkbox already selected then remove that from peopleChecked array
      this.setState({
        peopleChecked: this.state.peopleChecked.filter(element => element.id !== person.id),
        selectPeopleId: this.state.selectPeopleId.filter(element => element !== person.id)
      }, () => console.log(this.state.peopleChecked))
    }else{
      //If clicked checkbox is not already selected then add that in peopleChecked array
      this.setState({
        selectPeopleId: [...this.state.selectPeopleId, person.id],
        peopleChecked: [...this.state.peopleChecked,person]
      }, () => {console.log(this.state.selectPeopleId);console.log(this.state.peopleChecked);})
    }
  }*/


  render() {
    return (
      <div>
        {this.state.people.map(person => (
          <div key={person.id} className="mb-1">
            <input 
              type={'checkbox'}
              id={person.id}
              label={person.firstname}
              checked={this.state.peopleChecked.some(({ asset}) => asset['object']['user']['id'] ===           person.userCompetences.map((user, index) => {
                  user['asset']['id']
                })
              )}
              onChange = {() => this.handleSelect(person)}
            /> {person.firstname}
          </div>
        ))}
      </div>
    );
  }
}
  checked={
            this.state.peopleChecked.some(
              ({ asset }) => asset['object']['user']['asset_id'] === person.userCompetences.map(
                (user, index) => user['asset']['id']
              )[0]
          )}