Javascript 用于更改状态和筛选器列表的复选框

对不起，我在这方面还是个新手，只是为了防止有人想看到我在这里协商嵌入的代码是全部代码

无论如何，我使用列表A中的复选框来设置状态，这样一个方法就可以从列表B中筛选项目，并且只显示那些与ObjectID关联的项目

我不确定我的

复选框是否未正确设置状态，或者我的方法是否工作不正常

class Home extends React.Component {
    state = {   
        conditions: [],
        symptoms: [],
        selectedSymptom: []
    }
    componentDidMount() {
        this.getConditionsMethod();
        this.getSymptomsMethod();
    }

    getConditionsMethod = () => {
        API.getConditions()
            .then(data => {
                console.log(data);
                data.data.sort((a, b) => a.name.localeCompare(b.name))
                this.setState({
                    conditions: data.data
                })
            })
            .catch(err => console.log(err))
    };

    getSymptomsMethod = () => {
      API.getSymptoms()
            .then(data => {
                console.log(data);
                data.data.sort((a, b) => a.name.localeCompare(b.name));
                this.setState({
                    symptoms: data.data
                })
            })
            .catch(err => console.log(err))
    };

    filterConditionsMethod = () => {
        API.getConditions()
            .then(data => {
                console.log(data);
                data.data.sort((a, b) => a.name.localeCompare(b.name));
                data.data.filter(condition => !condition.symptoms.includes(this.state.selectedSymptom || this.state.selectedSymptom.length))
                this.setState({
                    selectedSymptom: data.data
                })
            })
            .catch(err => console.log(err))
    };

后来我回来了

<div className="doubleCol">
    {this.state.symptoms.map(item => (
    <ListItem key={item.ObjectID}>
        <input name="slector"
               type="checkbox"
               className="sympSelect"
               onClick={() => this.setState({ selectedSymptom: true })}
        />
        {item.name}
    </ListItem>
    ))}
</div>



{this.state.symptoms.map（项=>(
this.setState（{selectedSymptom:true}）
/>
{item.name}
))}

我已经花了两周的时间来构建这个应用程序，在过去的两天里一直坚持这个过滤。
我需要在明天下午之前拥有这个应用程序MVP，以便在一个为应届毕业生举办的就业活动上进行演示，这是剩下的仅有的两件事之一

我没有足够的代表获得赏金，但对许多用户来说，更改复选框后得到的任何帮助或建议都是有问题的。见此：

在此线程中，您会发现有人建议使用onClick或其他方法来实现此功能。我本可以把这句话作为评论加上去，但我没有50%的声誉：（
我设法用
ReactBootstrap
捕捉到了CheckBox的onChange事件

my index.html


待办事项列表应用程序

myapp.js-仅相关代码片段
（app.js不包含任何导入）

类FormTodos扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
待办事项：[]，
新任务：''，
秀:假,，
下一个索引：1，
}
this.onCheckBoxChanged=this.onCheckBoxChanged.bind（this）；
}
onCheckBoxChanged（事件）{
//只是为了显示我进入函数的迹象
log（“onCheckBoxClick（event）-->ElementId=“+event.currentTarget.id”）；
}
render（）{
//您的代码在这里：-）
返回(
this.onCheckBoxChanged（项）}
isActive={todo.isActive}/>
);
}
}

注意
onChange={（item）=>this.onCheckBoxChanged（item）}
？

我希望这能有所帮助。
因此，这最终变得更加复杂，因为为什么它不起作用（不得不让一个朋友帮我重新编写方法），部分原因是我如何设置数据库，它从中提取关联（lodash必须参与）

但是，如果将来有人在寻找复选框和状态帮助，请重新选择复选框，这就是有效的方法：

         <div className="doubleCol">
            {this.state.symptoms.map(item => (
               <ListItem key={item.ObjectID}>
                   <input
                      name="slector"
                      type="checkbox"
                      className="sympSelect"
                     onClick={() => this.setState(prevState => ({ selectedSymptom: [...prevState.selectedSymptom, item] }))}

                            />
                              {item.name}
                   </ListItem>
                ))}
            </div>


{this.state.symptoms.map（项=>(
this.setState（prevState=>（{selectedSymptom:[…prevState.selectedSymptom，item]}））}
/>
{item.name}
))}

至于剩下的方法问题，如果有人真的感兴趣，我会在第一篇文章中更新要点。
我故意没有检查
属性，因为我读过它引起的问题，但不知道
onChange
，所以我继续做了ii
onClick
而不是steadno，不幸的是，虽然这可能有帮助，但它没有修复它，因此它无法过滤。您可以在plunker/codepen/JSFIDLE或其他类似站点上共享您的代码吗？您可以在plunker/codepen/JSFIDLE或其他类似站点上共享您的代码吗？
         <div className="doubleCol">
            {this.state.symptoms.map(item => (
               <ListItem key={item.ObjectID}>
                   <input
                      name="slector"
                      type="checkbox"
                      className="sympSelect"
                     onClick={() => this.setState(prevState => ({ selectedSymptom: [...prevState.selectedSymptom, item] }))}

                            />
                              {item.name}
                   </ListItem>
                ))}
            </div>