在 React 中，我从 mongo 调用两个列表到页面，我想单击一个来过滤其他列表中显示的内容 [英] in React, I call two lists to page from mongo and I want to click one to filter what is shown in other
问题描述
我正在开展一个项目，其中我有 2 个 mongo 集合，集合 A(症状列表)都包含与它们相关的集合 B(条件)中的项目.
"_id" : ObjectId("5dc4bc92b6523a203423f2fa"),"name" : "咳嗽",症状" : [ObjectId("5dc4bc19299dfc46843a65f0"),ObjectId("5dc4bc19299dfc46843a65f2")]反之亦然
"_id" : ObjectId("5dc4bc19299dfc46843a65f0"),"name" : "肺癌",描述":等等等等字符串"，症状" : [ObjectId("5dc4bc92b6523a203423f2fa")]我调用它们的代码看起来像这样
class Home 扩展 React.Component {状态 = {使适应: []，症状: []，}componentDidMount() {this.getConditionsMethod();this.getSymptomsMethod();}getConditionsMethod = () =>{API.getConditions().then(数据=> {控制台日志(数据)；data.data.sort((a, b) => a.name.localeCompare(b.name));this.setState({条件:data.data})}).catch(err => console.log(err))};getSymptomsMethod = () =>{API.getSymptoms().then(数据=> {控制台日志(数据)；data.data.sort((a, b) => a.name.localeCompare(b.name));this.setState({症状:data.data})}).catch(err => console.log(err))};和我的 render() {return (
<Col ><行><Col className="symp"><div className="doubleCol">{this.state.symptms.map(item => (<ListItem key={item.ObjectID}><输入类型=收音机"名称=选择器"值=选项2"检查={假}类名=症状检查"/>{项目名称}</ListItem>))}</Col></行><行><Col className="cond"><div className="doubleCol">{this.state.conditions.map(item => (<ListItem key={item.ObjectID}>{项目名称}</ListItem>))}
</Col></行></Col>
我目前在症状列表上的按钮实际上并没有做任何事情.目标是单击按钮时，条件列表将仅显示具有该症状的那些条件，而不是呈现所有这些条件.我已经想到了一些可能有效但实际上还没有开始试验的方法.任何帮助或将我指向正确的方向都会很棒，这样我就不会在这可能是一种方法，不行"的兔子洞中浪费太多时间
首先，您发布的第一个代码块中可能有一些拼写错误.咳嗽(一种症状)应该有一系列条件，而不是一系列其他症状，对吗?
无论如何，您可能希望包含一个名为selectedSymptom"之类的状态属性，每次您选择不同的症状时，该属性都会更新.
然后在条件"部分中，您无需呈现完整的条件列表，而只需筛选在其症状数组中包含所选症状的条件.
{this.state.conditions.filter(condition => condition.symptoms.includes(this.state.selectedSymptom)).map(item => (<ListItem key={item.ObjectID}>{项目名称}</ListItem>))}This is the relevant part of my page to hopefully make it clearer
I am working on a project where i have 2 mongo collections and collection A (list of symptoms) all have items from collection B (conditions) they are related to.
"_id" : ObjectId("5dc4bc92b6523a203423f2fa"),
"name" : "Cough",
"symptoms" : [
ObjectId("5dc4bc19299dfc46843a65f0"),
ObjectId("5dc4bc19299dfc46843a65f2")
]
and vice versa
"_id" : ObjectId("5dc4bc19299dfc46843a65f0"),
"name" : "Lung Cancer",
"description" : "blah blah string",
"symptoms" : [
ObjectId("5dc4bc92b6523a203423f2fa")
]
My code where I call them looks like this
class Home extends React.Component {
state = {
conditions: [],
symptoms: [],
}
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))
};
and the relevant section of my render() {return (
<Col >
<Row>
<Col className="symp">
<div className="doubleCol">
{this.state.symptoms.map(item => (
<ListItem key={item.ObjectID}>
<input
type="radio"
name="selector"
value="option 2"
checked={false}
className="sympCheck"
/>
{item.name}
</ListItem>
))}
</div>
</Col>
</Row>
<Row>
<Col className="cond">
<div className="doubleCol">
{this.state.conditions.map(item => (
<ListItem key={item.ObjectID}>
{item.name}
</ListItem>
))}
</div>
</Col>
</Row>
</Col>
my buttons on the symptom list at the moment don't actually do anything. The goal is that onClick of a button the list of conditions will display only those conditions which have that as a symptom instead of rendering all of them. I have thought of a few ways that MIGHT work but haven't actually stared experimenting yet. Any help or pointing me in the right direction would be great so I don't lose too many hours down rabbit holes of 'this might be a way to do it, nope didn't work'
First of all, you might have a little typo in the first code block you posted. A cough (a symptom) should have an array of conditions, not an array of other symptoms, right?
Anyway, you probably want to include a state property called something like 'selectedSymptom' which gets updated each time you select a different symptom.
Then in the Conditions section, instead of rendering the full list of conditions, you can just filter for the ones that include the selectedSymptom in their array of symptoms.
{this.state.conditions
.filter(condition => condition.symptoms.includes(this.state.selectedSymptom))
.map(item => (
<ListItem key={item.ObjectID}>
{item.name}
</ListItem>
))
}
这篇关于在 React 中，我从 mongo 调用两个列表到页面，我想单击一个来过滤其他列表中显示的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
