Java 在spring中将ReactJS前端连接到REST API

根据本页上的教程： 我正在尝试创建SpringRESTAPI后端的前端。 我对这些示例进行了一些修改，以适合我在春季的项目，但不幸的是，它现在不起作用。 现在，我只是想在主页上从数据库中写出一些记录。 将显示一个空白的白色页面，而不是数据库中的文本

在这里您可以看到curl打印输出： 控制器类中的我的java方法：

@RequestMapping（value=“/getAllDelegations”，method=RequestMethod.GET）
@应答器
公共列表getAllDelegations（）{
返回delegationService.findAll（）；
}

DelegationsTest.js-此文件应打印出数据库中的数据：

从“React”导入React；
const委托=（道具）=>{
返回(
代表团名单
props.delegations.map（（delegations）=>(
{delegation.delegationId}
{delegation.user.lastName}
{delegation.user.companyName}

))
)
};
导出默认委托

我的主app.js文件：

const React=require（'React'）；
const ReactDOM=require（'react-dom'）；
从“/components/DelegationsTest”导入委派；
类应用程序扩展了React.Component{
构造器（道具）{
超级（道具）；
此.state={
代表团：[]
};
}
componentDidMount（）{
取（'http://localhost:8080/getAllDelegations')
.then（res=>res.json（））
。然后（（数据）=>{
this.setState（{delegations:data}）
})
.catch（console.log）
}
render（）{
返回(
你好世界
)
}
}
ReactDOM.render(
,
document.getElementById（'react'）
)

---

谁能告诉我我在哪里犯的错误吗？我将非常感谢。

因为您正在使用组件，所以已呈现了装载委派组件，并且收到的新道具不会更新该组件

我建议您将委托功能组件转换为类组件，并使用componentWillReceiveProps方法在收到props时更新状态

    import React from 'react';

    class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
            delegations: props.delegations
        };
    }


    componentWillReceiveProps(nextProps) {
        this.setState({
            delegations: nextProps.delegations
        })
    }
    render() {
        return ( <
            div >
            <
            center > < h1 > Delegations List </h1> </center >
            this.state.delegations.map((delegation) => ( <
           div >
                <
                div >
                <
                h5 > {
                    delegation.delegationId
                } < /h5> <
                h6 > {
                    delegation.user.lastName
                } < /h6> <
                p > {
                    delegation.user.companyName
                } < /p> <
                /div> <
                /div>
            )) <
            /div>
        )
    };

 }

 export default Delegations

从“React”导入React；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
代表团：道具
};
}
组件将接收道具（下一步）{
这是我的国家({
代表团：下一步行动
})
}
render（）{
报税表（<
div>
<
中心>
代表团列表
this.state.delegations.map（（delegation）=>）<
div>
<
div>
<
h5>{
delegation.delegationId
}
<
h6>{
delegation.user.lastName
}<
p>{
delegation.user.companyName
}
<
/div><
/div>
)) <
/div>
)
};
}
导出默认委托

当您使用组件时，已呈现Demount委派组件，并且收到的新道具不会更新该组件

我建议您将委托功能组件转换为类组件，并使用componentWillReceiveProps方法在收到props时更新状态

    import React from 'react';

    class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
            delegations: props.delegations
        };
    }


    componentWillReceiveProps(nextProps) {
        this.setState({
            delegations: nextProps.delegations
        })
    }
    render() {
        return ( <
            div >
            <
            center > < h1 > Delegations List </h1> </center >
            this.state.delegations.map((delegation) => ( <
           div >
                <
                div >
                <
                h5 > {
                    delegation.delegationId
                } < /h5> <
                h6 > {
                    delegation.user.lastName
                } < /h6> <
                p > {
                    delegation.user.companyName
                } < /p> <
                /div> <
                /div>
            )) <
            /div>
        )
    };

 }

 export default Delegations

从“React”导入React；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
代表团：道具
};
}
组件将接收道具（下一步）{
这是我的国家({
代表团：下一步行动
})
}
render（）{
报税表（<
div>
<
中心>
代表团列表
this.state.delegations.map（（delegation）=>）<
div>
<
div>
<
h5>{
delegation.delegationId
}
<
h6>{
delegation.user.lastName
}<
p>{
delegation.user.companyName
}
<
/div><
/div>
)) <
/div>
)
};
}
导出默认委托

    import React from 'react';

        const Delegations = (props) => {
          return (
            <div>
              <center><h1>Delegations List</h1></center>
              props.delegations.map((delegation) => (
                <div>
                  <div>
                    <h5>{delegation.delegationId}</h5>
                    <h6>{delegation.user.lastName}</h6>
                    <p>{delegation.user.companyName}</p>
                  </div>
                </div>
              ))
            </div>
          )
        };


        export default Delegations

const React = require('react');
const ReactDOM = require('react-dom'); 
import Delegations from './components/DelegationsTest';

class App extends React.Component  { 
    constructor(props) { 
        super(props);
        this.state = {
                delegations: []
        };
    }
     componentDidMount() {
            fetch('http://localhost:8080/getAllDelegations')
            .then(res => res.json())
            .then((data) => {
              this.setState({ delegations: data })
            })
            .catch(console.log)
     }

     render() {
            return (
                    <div>
                        <h1>HelloWorld</h1>
                        <div>
                            <Delegations delegations={this.state.delegations} />    
                        </div>
                    </div>

            )

     }
}
ReactDOM.render(
        <App />,
        document.getElementById('react')
    )

    import React from 'react';

    class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
            delegations: props.delegations
        };
    }


    componentWillReceiveProps(nextProps) {
        this.setState({
            delegations: nextProps.delegations
        })
    }
    render() {
        return ( <
            div >
            <
            center > < h1 > Delegations List </h1> </center >
            this.state.delegations.map((delegation) => ( <
           div >
                <
                div >
                <
                h5 > {
                    delegation.delegationId
                } < /h5> <
                h6 > {
                    delegation.user.lastName
                } < /h6> <
                p > {
                    delegation.user.companyName
                } < /p> <
                /div> <
                /div>
            )) <
            /div>
        )
    };

 }

 export default Delegations