Javascript I'；我用React.js制作的管理面板上的博客帖子编辑按钮有问题

我使用React.js创建了一个管理面板。我想能够从这里查看和编辑网站上的博客文章。为此，我在数据来源的table元素中添加了一个按钮。此按钮从react strap触发模式。然而，当这个模式被打开时，我只能得到表底部的帖子数据。我在map函数中调用了modal，通过发送每个Blog帖子的ID值，我将数据带到map函数中，因此页面上有多少数据，modal呈现的数量将是多少。但是，当我点击编辑按钮时，所有的模态都会被触发。我怎样才能解决这个问题

我留下了我试图处理的博客页面的代码：

import React, { Component, useState } from 'react';
import { Container, Table, Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import * as FaIcons from 'react-icons/fa';
import * as AiIcons from 'react-icons/ai';



export default class Blog extends Component {

    componentDidMount() {
        this.getBlogPosts();
      
    }

    state = {
        blogPosts: [],
        columns: [
            { name: 'Header', selector: 'header' },
            { name: 'Description', selector: 'description' },
            { name: 'Keywords', selector: 'keywords' },
            { name: 'Body', selector: 'body' },
            { name: 'Create Time', selector: 'createdAt' }
        ],
        modal: false
    }

    toggle = (event) => {
        this.setState({ modal: this.state.modal == false ? true : false });
    }

    getBlogPosts = () => {

        fetch("http://localhost:5000/api/blog")
            .then((response) => response.json())
            .then((response) => { console.log(response); return response; })
            .then((response) => this.setState({
                blogPosts: response.data
            }));
    }


    render() {
        return (
            <Container>
                {this.state.blogPosts.map(posts=>
                  
                  <Modal isOpen={this.state.modal} id={posts._id} toggle={this.toggle} className={this.props.className}>
                      <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
                      <ModalBody>
                          {posts.title}
                          </ModalBody>
                      <ModalFooter>
                          <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
                          <Button color="secondary" onClick={this.toggle}>Cancel</Button>
                      </ModalFooter>
                  </Modal>
             
                )}
                
                <Table striped className="display">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Description</th>
                            <th>Category</th>
                            <th>Tag</th>
                            <th>Operations</th>
                        </tr>
                    </thead>
                    <tbody> 
                        {this.state.blogPosts.map(post =>
                            <tr key={post._id} >
                                <td> {post.title} </td>
                                <td> {post.description} </td>
                                <td> {post.category} </td>
                                <td> {post.tag} </td>
                                <td> <Button color="primary" onClick={this.toggle}><FaIcons.FaEdit/></Button></td>
                            </tr>

                        )}
                    </tbody>
                    <tfoot>
                        <tr>
                            <th>Title</th>
                            <th>Description</th>
                            <th>Category</th>
                            <th>Tag</th>
                        </tr>
                    </tfoot>
                </Table>

            </Container>

        )
    }
}

import React，{Component，useState}来自'React'；
从“reactstrap”导入{容器、表、按钮、模态、模态头、模态体、模态门}；
从“反应图标/fa”导入*作为FAICON；
从“反应图标/ai”导入*作为ai图标；
导出默认类Blog扩展组件{
componentDidMount（）{
这是getBlogPosts（）；
}
状态={
博客帖子：[]，
栏目：[
{name:'Header'，选择器：'Header'}，
{name:'Description'，选择器：'Description'}，
{name:'Keywords'，选择器：'Keywords'}，
{name:'Body'，选择器：'Body'}，
{name:'Create Time'，选择器：'createdAt'}
],
模态：假
}
切换=（事件）=>{
this.setState（{modal:this.state.modal==false？true:false}）；
}
getBlogPosts=（）=>{
取回（“http://localhost:5000/api/blog")
.then（（response）=>response.json（））
.then（（响应）=>{console.log（响应）；返回响应；}）
.然后（（响应）=>this.setState({
blogPosts:response.data
}));
}
render（）{
返回(
{this.state.blogPosts.map（posts=>
情态标题
{posts.title}
做某事{'}
取消
)}
标题
描述
类别
标签
操作
{this.state.blogPosts.map（post=>
{post.title}
{post.description}
{post.category}
{post.tag}
)}
标题
描述
类别
标签
)
}
}

---

之前，我将button元素转换为

元素，并将每个ID值传递给

元素的href属性。但是，结果还是不好。

您需要仅为博客文章的特定ID切换模式，而不是为每个博客文章切换模式，请像这样修改表行

<tr key={post._id} >
    <td> {post.title} </td>
    <td> {post.description} </td>
    <td> {post.category} </td>
    <td> {post.tag} </td>
    {/** Note the toggle function **/
    <td> <Button color="primary" onClick={() => this.toggle(post._id)}><FaIcons.FaEdit/></Button></td>
</tr>

在模式中，仅打开id匹配的模式

<Modal isOpen={this.state.modal && (this.state.id === posts.id)} id={posts._id} toggle={() => this.toggle(posts.id)} className={this.props.className}>
    <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
    <ModalBody>
        {posts.title}
        </ModalBody>
    <ModalFooter>
        <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
        <Button color="secondary" onClick={this.toggle}>Cancel</Button>
    </ModalFooter>
</Modal>

this.toggle（posts.id）}className={this.props.className}>
情态标题
{posts.title}
做某事{'}
取消

---

我希望您能理解。

可能与行键有关。fetch语句返回的数组包含多少个元素？我认为有多个博客帖子正在发布returned@Ashu现在它返回11个帖子。11个模态被触发了吗？对。但是，它们不会被触发打开。我分配了id值​​作为其id值的帖子的​​也是的，它已经11岁了，但他们等着打开。

<Modal isOpen={this.state.modal && (this.state.id === posts.id)} id={posts._id} toggle={() => this.toggle(posts.id)} className={this.props.className}>
    <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
    <ModalBody>
        {posts.title}
        </ModalBody>
    <ModalFooter>
        <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
        <Button color="secondary" onClick={this.toggle}>Cancel</Button>
    </ModalFooter>
</Modal>