javascript - React JS 如何根据选中值数组来选中某些复选框

Question

我是 React 新手，正在开发 React JS 应用程序。我需要根据数组中的一组值默认检查一些复选框。域值集在另一个数组中。

尝试使用带有 array.map() 的嵌套循环来完成任务
此外，尝试在单个循环中创建回调函数，并尝试使用数组过滤。它们都不能正常工作:

// Set of possible check box values ( file: person.jsx )
Domain=[
     { id:0, name:"apple", value:"Apple" },
     { id:1, name:"orange", value:"Orange"  },
     { id:2, name:"banana", value:"Banana"  },
     { id:3, name:"rGrape", value:"Red grapes"  },
     { id:4, name:"gGrape", value:"Green grapes"  },
]


// a single user's preferences ( file: person.jsx )
state={
    userid:0, 
    name:"Tom",
    gender:"Male",
    age:20,
    fruits:["apple", "rGrape"] 
}

render()内部实现的部分代码:

// ( file: person.jsx , inside render() )
{ 
this.Domain.map( 
    (fruit, index) => (
        //console.log();
        <p>
            <li key={fruit.id}>  
                <input type="checkbox" 
                    defaultChecked=
                    { //false //if set to false all unchecked
                        this.state.fruits.map(
                            (stateFruit) =>( 
                                 if(fruit.name === stateFruit)
                                        return true;
                                 else
                                        console.log(false);
                                 console.log(fruit.name === stateFruit)
                            )
                        )
                    } 
                    onChange={this.handleChangeChk} /> {fruit.value}
            </li>
        </p>
    )
)
}

我预计这只检查用户选择的水果，但它会检查每个复选框。如果有人能提出一种完成此任务的方法(可能采用不同的方法)，那就太好了。

Answer 1

您实际上想检查水果数组是否包含名称:

this.state.fruits.includes(fruit.name)