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>

    )

)

}

我希望这只会检查用户选择的水果，但会选中每个复选框。如果有人可以建议一种完成此任务的方法，或者采用其他方法，那就太好了。