时间戳

首页 > 解决方案 > 在 React 中，我从 mongo 调用两个列表到页面，我想单击一个来过滤其他显示的内容

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

问题描述

这是我页面的相关部分，希望能更清楚

我正在做一个项目，我有 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>

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

标签： javascriptreactjsmongodb

解决方案

你可以有另一个状态变量，比如“selectedSymptom”。然后在单击单选按钮时，您定义一个本质上调用 setState 并更新“selectedSymptom”值的方法。另外，改变地图逻辑

<Col className="cond">
                                <div className="doubleCol">
                                    {this.state.conditions.map(item => (
                                        <ListItem key={item.ObjectID}>
                                            {item.name}
                                        </ListItem>
                                    ))}
                                </div>
                             </Col>

根据选定的症状进行过滤。每当您设置状态变量时，都会调用重新渲染，它会根据 selectedSymptom 自动过滤列表。希望有帮助。

推荐阅读