Javascript 在ReactJS模式中，加载数据表单API时显示两次正文和页脚

我试图在模态中使用axios请求从laravel route加载数据，但是模态体和BTN在模态中显示了两次。为什么会这样？下面是我的代码供参考

class PopUp extends React.Component{
 constructor(props) {
    super(props);
    this.state={
        singleProject:[],
        errs:''
    }
}

singleData(){
    const token = document.querySelector('meta[name="csrf-token"]');
    const fd={
        '_token':token.content,
        'id':this.props.id,

    }
    return fd;
}
componentDidMount() {
    //reuest for services
    Axios.post('/single/project',this.singleData()).then(resp =>{
        this.setState({singleProject:resp.data});
        console.log(resp.data)
    }).catch(err=>{
        this.setState({errs:err})
        // console.log(err)
    })


}



render() {
    const project= this.state.singleProject;
    return(
        <div>
            <Modal show={this.props.show} onHide={this.props.onHide} size="xl" aria-labelledby="contained-modal-title-vcenter" centered>
                {
                    project.map(data=>(
                      <React.Fragment key={data.id}>
                                <Modal.Header closeButton>
                                    <Modal.Title id="contained-modal-title-vcenter">
                                        {data.project_name}
                                    </Modal.Title>
                                </Modal.Header>
                                <Modal.Body  >
                                <h4>Centered Modal</h4>
                            <p>
                            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
                            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
                            consectetur ac, vestibulum at eros.
                            </p>
                            </Modal.Body>
                            <Modal.Footer>
                                <a href={data.project_live_link} className="btn btn-primary">live</a>
                                <a href={data.project_github_link} className="btn btn primary">github</a>
                            </Modal.Footer>
                  </React.Fragment>
                    ))
                }

            </Modal>

        </div>
    )
}}
export default PopUp;

类弹出窗口扩展React.Component{
建造师（道具）{
超级（道具）；
这个州={
单个项目：[]，
错误：“”
}
}
singleData（）{
const-token=document.querySelector（'meta[name=“csrf-token”]”）；
常数fd={
“_token”：token.content，
“id”：this.props.id，
}
返回fd；
}
componentDidMount（）{
//服务业联盟
Axios.post（'/single/project'，this.singleData（））。然后（resp=>{
this.setState（{singleProject:resp.data}）；
控制台日志（响应数据）
}).catch（错误=>{
this.setState（{errs:err}）
//console.log（错误）
})
}
render（）{
const project=this.state.singleProject；
返回(
{
project.map（数据=>(
{data.project_name}
中心模态

这是一种发酵剂。这是一种发酵剂，
空调设备在，空调设备在，空调设备在，空调设备在，空调设备在，空调设备在，空调设备在，空调设备在，空调设备在，空调设备在，空调设备在，空调设备在，空调设备在，空调设备在，空调设备在，空调设备在，空调设备在，空调设备在，空调设备在
圣殿ac，爱神的前庭。

))
}
)
}}
导出默认弹出窗口；

这是我在渲染中得到的图像

---

我已尝试加载完整数据，现在我仅通过添加项目名称向您显示，但模式数据已经在project.map区域下显示了两次。请告诉我为什么会发生这种情况。singleProject是一个数组，似乎您从后端获得了两项，因此，当您执行

singleProject.map

时，最终会创建两个模态体和页脚

您应该改为将

状态.singleProject

更改为

{}

，并让API返回一个对象并替换模式代码，如下所示：

{project.project_name}
中心模态

在发酵罐中发酵。克拉斯·胡斯托·奥迪奥，
达比布斯空调设施位于埃吉斯塔斯埃吉特广场。莫比·利奥·里索斯，ac门
圣殿ac，爱神的前庭。

---

希望有帮助

因此，您正在获取数据，并将其存储在本地存储中，而获取的数据是以数组的形式存在的

此外，您正在映射这个获取的数组，并且对于数组中的每个项，您都将返回一个React片段

此React片段正在呈现Modal.Header、Modal.Body、Modal.Footer

<> P>而不是这种方法，你应该考虑一种不同的方法。 基本上，您需要在模式中显示所有项目。因此，请将每个项目视为一个整体

Modal.Header和Modal.Footer应该在map函数之外

<Modal>
 <Modal.Header>
  Modal Heading
 </Modal.Header>
   {data.map(project => (
      <div class='project'>
       <div class='name'>{project.name}</div>
       <div class='description'>{project.description}</div>
       <div class='project_link'>
         <div class='live_link'>{data.live_link}</div>
         <div class='github_link'>{data.github_link}</div>
       </div>
      </div>
    )})}
 <Modal.Footer>
  Footer Info
 </Modal.Footer>
</Modal>

---

在此之后，您可以像使用任何其他对象一样正常使用项目数据。我希望这能解决问题。如果没有，请分享您当前使用的确切代码

由于您在

模式中使用
project.map
，它们将显示两次。因此，理想情况下，如果
项目中有3个对象，那么您最终将看到其中的3个。你们到底在寻找什么？我已经很好地检查了它，只有一个项目来自后端，因为我用id显示项目，就像一篇文章一样，列表中有项目，当任何一个点击标题时，该项目的数据将显示在这个modalOkay中，那么在这种情况下，为什么要使用map呢。如果是这样的话，这个实现就更简单了。单击项目列表中的任何项目，获取项目的相应数据，如描述、链接等。使用该对象仅在模式中呈现信息。是的，我忘记了这一点，谢谢，我将尝试此方法请检查我的答案below@ZeeshanAwan我已经用你的怀疑更新了解决方案。如果您还有其他问题，请告诉我。否此模式用于显示一个项目的详细信息，我正在使用id获取其中一个项目的数据，如single post，并且我已经在我的控制台上验证了它。log（resp.data）其仅通过特定id获取的一个项目的详细信息谢谢您的回复。但是我的问题解决了。请核对以上答案，我只接受了一个答案
componentDidMount() {
//reuest for services
Axios.post("/single/project", this.singleData())
  .then(resp => {
    //here the data you are getting is in the form of an array.
    //but you don't need that entire array.
    //all you need is the object sitting at index 1
    //so instead of setting {resp.data} set {resp.data[1]}
    this.setState({
       singleProject: (resp.data && resp.data[1]) || {} 
    });
    console.log(resp.data);
   })
  .catch(err => {
    this.setState({ errs: err });
    console.log(err);
  });
 }