Question

Mod，这是旧问题here的延续。我开始对该问题进行编辑，但是到目前为止，事情进展了，我大部分都在重写。我不想重复这个问题。

我有2个mongo集合，集合A（症状）都具有与它们相关的集合B（条件）中的项。

mutation.ts

反之亦然

    "_id" : ObjectId("5dc4bc92b6523a203423f2fa"),
    "name" : "Cough",
    "symptoms" : [ 
        ObjectId("5dc4bc19299dfc46843a65f0"), 
        ObjectId("5dc4bc19299dfc46843a65f2")
    ]

我有状态和功能

    "_id" : ObjectId("5dc4bc19299dfc46843a65f0"),
    "name" : "Lung Cancer",
    "description" : "blah blah string",
    "symptoms" : [ 
        ObjectId("5dc4bc92b6523a203423f2fa")
    ]

在我的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)); this.setState({ selectedSymptom: data.data }) }) .catch(err => console.log(err)) };中，我有一个带有页面症状的复选框

render() {return

然后我在这里使用选择条件的过滤器呈现条件

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

所以我不知道的是 A）如何使onMount呈现所有条件，首先执行应做的事情，因此仅在选中复选框后才进行过滤。和 B）如何使复选框通过ObjectID更改<div className="doubleCol"> {this.state.conditions .filter(condition => condition.symptoms.includes(this.state.selectedSymptom)) .map(item => ( <ListItem key={item.ObjectID}> {item.name} </ListItem> ))} </div>中的过滤器数据

Answer 1

对不起，我认为我没有真正理解“通过ObjectID使filterConditionsMethod中的复选框更改过滤器数据的复选框”的意思，因此 B）问题让我感到困惑。

关于 A）问题，很遗憾，我现在无法测试，但如果我做对了，也许可以为您提供帮助。您可以在呈现 conditions 时为filter添加另一条语句，以检查是否已选择任何症状，如果是的话，可以通过症状进行过滤。这样的事情会做：

.filter(condition => !this.state.selectedSymptom.length || condition.symptoms.includes(this.state.selectedSymptom))

通过这种方式，filter仅在选择了至少一种症状（长度> 0）并且不包括这些所选症状之一的情况下才返回 false 。如果第一条语句返回 true （！0 = true），则由于{strong> OR 逻辑，filter将以两种方式返回 true 运算符。

更改一个列表的状态并使用另一列表上的复选框进行过滤的调用方法

1 个答案: