[英]In React js from App.js how to call another javascript file (service) method to consume API calls
I am new to React js, I am trying to consume REST API results.我是 React js 的新手,我正在尝试使用 REST API 结果。 So that I have written one separate file called /shared/job-service.js.
这样我就编写了一个名为 /shared/job-service.js 的单独文件。 From App.js I would like to call a method from job-service.js file and return these results to UI.
从 App.js 我想从 job-service.js 文件中调用一个方法并将这些结果返回给 UI。 Problem: I am unable to get the syntax to call the service js file method from the App.js file.
问题:我无法从 App.js 文件中获取调用服务 js 文件方法的语法。
import React, {Component} from 'react';
import Jobs from './model/Jobs';
class JobService extends Component {
render() {
return (
<Jobs jobs={this.state.jobs} />
)
}
state = {
jobs: []
};
componentDidMount() {
fetch('http://localhost:8080/api/v1/job/')
.then(res => res.json())
.then((data) => {
this.setState({ contacts: data })
})
.catch(console.log)
}
}
export default JobService;
import React from 'react';
import { Column, Row } from 'simple-flexbox';
import { StyleSheet, css } from 'aphrodite';
import SidebarComponent from './components/sidebar/SidebarComponent';
import HeaderComponent from './components/header/HeaderComponent';
import './App.css';
const styles = StyleSheet.create({
container: {
height: '100vh'
},
content: {
marginTop: 54
},
mainBlock: {
backgroundColor: '#F7F8FC',
padding: 30
}
});
class App extends React.Component {
state = { selectedItem: 'Tickets' };
render() {
const { selectedItem } = this.state;
return (
<Row className={css(styles.container)}>
<SidebarComponent selectedItem={selectedItem} onChange={(selectedItem) => this.setState({ selectedItem })} />
<Column flexGrow={1} className={css(styles.mainBlock)}>
<HeaderComponent title={selectedItem} />
<div className={css(styles.content)}>
<span>Content....</span>
//call the job-service.js file componentDidMount() method and return the result to the UI.
</div>
</Column>
</Row>
);
}
}
export default App;
I would like to know the syntax to call the method from another js file and consume the results.我想知道从另一个 js 文件调用该方法并使用结果的语法。 thanks in advance.
提前致谢。
Move /shared/job-service.js into /src/service/job.js移动/shared/job-service.js到/src/service/job.js
Then, replace all the content on job.js by:然后,将 job.js 上的所有内容替换为:
export function getJobs() {
return fetch('http://localhost:8080/api/v1/job/')
.then(res => res.json())
.then((data) => data)
}
Of course, you can add a catch, async/await.. all what you want当然,你可以添加一个catch,async/await..所有你想要的
After that, you have to make some changes on App.js, like this:之后,您必须对 App.js 进行一些更改,如下所示:
/src/App.js /src/App.js
import React from 'react';
import { Column, Row } from 'simple-flexbox';
import { StyleSheet, css } from 'aphrodite';
import SidebarComponent from './components/sidebar/SidebarComponent';
import HeaderComponent from './components/header/HeaderComponent';
import './App.css';
import { getJobs } from './service/job';
const styles = StyleSheet.create({
container: {
height: '100vh'
},
content: {
marginTop: 54
},
mainBlock: {
backgroundColor: '#F7F8FC',
padding: 30
}
});
class App extends React.Component {
state = { selectedItem: 'Tickets', jobs: [] };
componentDidMount() {
getJobs()
.then(data => {
this.setState({
jobs: data
})
});
}
render() {
const { selectedItem } = this.state;
return (
<Row className={css(styles.container)}>
<SidebarComponent selectedItem={selectedItem} onChange={(selectedItem) => this.setState({ selectedItem })} />
<Column flexGrow={1} className={css(styles.mainBlock)}>
<HeaderComponent title={selectedItem} />
<div className={css(styles.content)}>
<span>Content....</span>
//call the job-service.js file componentDidMount() method and return the result to the UI.
</div>
</Column>
</Row>
);
}
}
export default App;
And now you can map (Loop) this.state.jobs, in order to display jobs on Content Section现在您可以 map(循环)this.state.jobs,以便在内容部分显示作业
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.