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