javascript - 在 React 中，我调用两个列表从 mongo 进行分页，我想单击一个列表来过滤其他列表中显示的内容

Question

This is the relevant part of my page to hopefully make it clearer

我正在做一个项目，我有 2 个 mongo 集合和集合 A(症状列表)都有来自集合 B(条件)的项目与它们相关。

    "_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: [],
    }
    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))
    };

和我的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>

目前我在症状列表上的按钮实际上没有任何作用。目标是单击按钮时，条件列表将仅显示那些将其作为症状的条件，而不是呈现所有条件。我已经想到了一些可能有效的方法，但还没有真正开始试验。任何帮助或为我指明正确的方向都会很棒，这样我就不会在“这可能是一种方法，但没有用”的兔子洞里浪费太多时间

Answer 1

首先，您发布的第一个代码块中可能有一点错字。咳嗽(一种症状)应该有一系列条件，而不是一系列其他症状，对吗？

无论如何，您可能希望包含一个名为“selectedSymptom”之类的状态属性，每次您选择不同的症状时它都会更新。

然后在“条件”部分，无需呈现完整的条件列表，您可以只筛选在其症状数组中包含所选症状的条件。

{this.state.conditions
  .filter(condition => condition.symptoms.includes(this.state.selectedSymptom))
  .map(item => (
    <ListItem key={item.ObjectID}>
       {item.name}
    </ListItem>
  ))
}