Reactjs React引导模式组件在我映射列表时打开/关闭所有模式

新的编程，所以我很抱歉，如果我的措词不正确。我正在使用.map渲染并列出数组中的每个项目。对于每个项目，我希望模态仅打开/关闭与数组中每个项目对应的特定模态。但是，当我点击按钮打开模式时，每个模式都会打开和关闭。我相信这是因为modals都设置为一个开/关按钮。如何设置它（使用.map value.id或其他东西），以便只打开和关闭特定的模式

class DrinkMenu extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            show: false
        };
        this.handleHide = this.handleHide.bind(this);
    }

    handleHide() {
        this.setState({ show: false });
    }

    async componentDidMount() {
        let res = await axios.get('/getAllDrinks')
        this.props.updateDrinkMenu(res.data)
    }

    async addToCart(drinkObj) {
        let res = await axios.post('/addToCart', drinkObj)
        console.log(`Added ${drinkObj.name} to order.`)
    }

    render() {
        let drinkList = this.props.drinkMenu.map((drink) => {
            return (
                <div key={drink.id}>
                    <h5>{drink.name}</h5>
                    <h6>${drink.price}</h6>

                    <span
                        onClick={() => this.setState({ show: true })}
                    >
                        <strong>More Info</strong>
                        <br />
                        <button onClick={() => this.addToCart(drink)}>Add to Order</button>

                    </span>

                    <Modal
                        show={this.state.show}
                        onHide={this.handleHide}
                        container={this}
                        aria-labelledby="contained-modal-title"
                    >
                        <Modal.Header closeButton>
                            <Modal.Title id="contained-modal-title">
                                {drink.name}
                            </Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            <p>{drink.sub_category} | ABV {drink.abv}% | {drink.origin}</p>
                            <Col xs={6} md={4}>
                                <Image className="drink-logo" src={drink.logo} thumbnail />
                            </Col>
                            <p className="drink-description"><strong>Description</strong><br />{drink.description}</p>
                            <p href={drink.website}>Website</p>
                        </Modal.Body>
                        <Modal.Footer>
                            <Button onClick={this.handleHide}>Close</Button>
                        </Modal.Footer>
                    </Modal>
                </div>
            )
        })

        return (
            <div>
                <h2>Drink Menu</h2>
                <div>
                    {drinkList}
                </div>
            </div>
        )
    }
}

类DrinkMenu扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
节目：假
};
this.handleHide=this.handleHide.bind（this）；
}
handleHide（）{
this.setState（{show:false}）；
}
异步组件didmount（）{
let res=wait axios.get（'/getAllDrinks'）
this.props.updateDrinkMenu（res.data）
}
异步addToCart（drinkObj）{
let res=wait axios.post（'/addToCart'，drinkObj）
log（`Added${drinkObj.name}到order.`）
}
render（）{
让drinkList=this.props.drinkMenu.map（（饮料）=>{
返回(
{drink.name}
${drink.price}
this.setState（{show:true}）}
>
更多信息


this.addToCart（drink）}>Add to Order
{drink.name}
{drink.sub_category}ABV{drink.ABV}%{drink.origin}

描述
{drink.description}
网站
接近
)
})
返回(
饮料菜单
{drinkList}
)
}
}

从您共享的代码中，我看到您正在使用相同的状态值处理所有

模型

，即

显示

。这导致所有

模型的所有状态均为
真
，因此所有模型均如图所示

为了解决这个问题，您可以在一个新的
React
类中提取整个组件，该类仅具有根据独立状态显示
Modal
的功能。因此，您的新React组件将如下所示：

class DrinkComponent extends React.Component {
    constructor(props) {
        super(props);
        this.handleHide = this.handleHide.bind(this);
        this.state = {
            show: false,
        }
    }
    handleHide() {
        this.setState({ show: false });
    }
    render() {
        const { drink } = this.props;
        return (<div key={drink.id}>
            <h5>{drink.name}</h5>
            <h6>${drink.price}</h6>
            <span
                onClick={() => this.setState({ show: true })}
            >
                <strong>More Info</strong>
                <br />
                <button onClick={() => this.props.addToCart(drink)}>Add to Order</button>
            </span>
            <Modal
                show={this.state.show}
                onHide={this.handleHide}
                container={this}
                aria-labelledby="contained-modal-title"
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title">
                        {drink.name}
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <p>{drink.sub_category} | ABV {drink.abv}% | {drink.origin}</p>
                    <Col xs={6} md={4}>
                        <Image className="drink-logo" src={drink.logo} thumbnail />
                    </Col>
                    <p className="drink-description"><strong>Description</strong><br />{drink.description}</p>
                    <p href={drink.website}>Website</p>
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={this.handleHide}>Close</Button>
                </Modal.Footer>
            </Modal>
        </div>);
    }
}

render() {
        let drinkList = this.props.drinkMenu.map((drink) => (<DrinkComponent drink={drink} addToCart={this.addToCart}/>));
        return (
            <div>
                <h2>Drink Menu</h2>
                <div>
                    {drinkList}
                </div>
            </div>
        )
    }

您还可以从
DrinkMenu
中删除show
状态
，因为在那里不需要它。
希望有帮助。
这就解决了它！非常感谢你！非常感谢你的帮助@贾斯汀。关于
组件didmount
的旁注。。。它可能不应该是异步的，但由于axios返回承诺，因此它们是“然后”可以实现的。componentDidMount（）{axios.get（'/GetAllDrinds'）。然后（函数（res）{this.props.UpdatedLinkMenu（res.data）；}）；}作为第二个补充，奇怪的是，这个组件调用来更新它也从props渲染的饮料菜单。它通常由父组件计算，然后按您所做的方式传递。@JustinC请接受答案，以防它解决了问题issue@JustinC. 功能上异步/等待和承诺是两件不同的事情，但通常一起工作。这里需要注意的一个关键方面是，javascript线程将在
wait
处暂停，直到该行完成执行，然后再继续该函数。然而，有了承诺，解析/拒绝被放入队列中，稍后异步执行，因此函数的其余部分将执行。在使用react的这种情况下，您不希望不必要地暂停其生命周期功能。更新redux状态应该在应用程序加载时或父容器准备呈现列表时发生。家长应负责获取最新的饮料选项，然后通过
mapstatetops
redux函数将其传递到列表中。