Я делаю проект реакции, используя express.js, mongodb, react.js и node.js. и пытается получить данные из backend api, который работает на порту 5000.
Когда я проверяю api с помощью postman
, он работает. И данные отображаются в консоли браузера. Кроме того, когда я нажимаю кнопку Get
, как показано в приведенном ниже коде, она не работает в браузере. Но я могу видеть данные массива в консоли браузера.
<Button onClick = {()=><li>{employeeItem}</li>}>Get</Button>
Вот мой полный код:
import React, { Component } from "react";
import {
form,
FormGroup,
FormControl,
ControlLabel,
Button
} from "react-bootstrap";
import "./App.css";
import { stringify } from "querystring";
class App extends Component {
constructor(props) {
super(props);
this.AddName = this.AddName.bind(this);
this.AddContact = this.AddContact.bind(this);
this.AddAge = this.AddAge.bind(this);
this.state = {
name: "",
contact: "",
age: "",
employees: []
};
}
AddName(e) {
this.setState({ name: e.target.value });
}
AddContact(e) {
this.setState({ contact: e.target.value });
}
AddAge(e) {
this.setState({ age: e.target.value });
}
componentWillMount() {
fetch("http://localhost:5000/api/employees")
.then(res => res.json())
.then(data => this.setState({ employees: data }));
}
render() {
const employeeItem = this.state.employees.map(employee => (
<div key = {employee._id}>
<h3>{employee.name}</h3>
<p>{employee.contact}</p>
<p>{employee.age}</p>
</div>
));
return (
<div className = "App">
<header className = "App-header">
<h1 className = "App-title">Employee List</h1>
</header>
<div className = "Layout">
<form>
<FormGroup>
<ControlLabel>Name:</ControlLabel>
<FormControl
type = "text"
value = {this.state.name}
placeholder = "Employee name"
onChange = {this.AddName}
/>
<div>
<ControlLabel>Contact:</ControlLabel>
<FormControl
type = "number"
value = {this.state.contact}
placeholder = "Mobile number"
onChange = {this.AddContact}
/>
</div>
<div>
<ControlLabel>Age:</ControlLabel>
<FormControl
type = "number"
value = {this.state.age}
placeholder = "Age"
onChange = {this.AddAge}
/>
</div>
</FormGroup>
<Button type = "submit">Add</Button>
<Button onClick = {() => console.info({ employeeItem })}>Get</Button>
<Button type = "submit">Delete</Button>
</form>
</div>
</div>
);
}
}
export default App;
@Almaju Я пытаюсь отобразить данные, поступающие из моей базы данных, на мою страницу при нажатии кнопки Get, но не работает. Я также поделился снимком экрана. Когда я нажимаю кнопку Get, данные поступают на консоль, но я хотел, чтобы эти данные появились на моей странице.
Вы не можете визуализировать элементы, как вы пытаетесь, внутри обратного вызова кнопки. Где и когда вы хотите увидеть эти предметы? Вы уже получаете данные и устанавливаете свое состояние. Разве вы не хотите видеть их сразу после получения? Конечно, вы можете сделать это с помощью кнопки с двумя вариантами: 1. Запустить выборку с помощью кнопки вместо того, чтобы делать это в componentWillMount
, а затем отображать элементы. 2. Выполнить предварительную выборку, но скрыть элементы с подходящим свойством состояния. Затем измените его нажатием кнопки.
Вы не можете визуализировать элемент, пытаясь выполнить обратный вызов onClick
. Вы можете визуализировать элементы сразу после их получения, или вы можете запустить выборку с помощью onClick
, или вы можете скрыть и показать элементы.
Сразу рендеринг
const employees = [
{ _id: 1, name: "foo", contact: "abc", age: 20 },
{ _id: 2, name: "bar", contact: "efg", age: 30 },
{ _id: 3, name: "baz", contact: "hij", age: 40 }
];
const fakeRequest = () =>
new Promise(resolve => setTimeout(() => resolve(employees), 1000));
class App extends React.Component {
state = {
employees: []
};
componentDidMount() {
fakeRequest().then(employees => this.setState({ employees }));
}
render() {
const employees = this.state.employees.map(employee => (
<div style = {{ border: "1px solid black" }} key = {employee._id}>
<h3>Name: {employee.name}</h3>
<p>Contact: {employee.contact}</p>
<p>{employee.age}</p>
</div>
));
return (
<div>
<p>Data will be fetched in a second automatically.</p>
{employees}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "root"></div>
Получите одним нажатием кнопки
const employees = [
{ _id: 1, name: "foo", contact: "abc", age: 20 },
{ _id: 2, name: "bar", contact: "efg", age: 30 },
{ _id: 3, name: "baz", contact: "hij", age: 40 },
];
const fakeRequest = () => new Promise( resolve =>
setTimeout( () => resolve( employees ), 1000)
);
class App extends React.Component {
state = {
employees: [],
};
getEmployees = () =>
fakeRequest()
.then(employees => this.setState({ employees }))
render() {
const employees = this.state.employees.map(employee => (
<div style = {{ border: "1px solid black"}} key = {employee._id}>
<h3>Name: {employee.name}</h3>
<p>Contact: {employee.contact}</p>
<p>{employee.age}</p>
</div>
));
return (
<div>
<p>Data will be fetched after the button click.</p>
<button onClick = {this.getEmployees} >Get Employees</button>
{employees}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "root"></div>
Показать / скрыть метод
const employees = [
{ _id: 1, name: "foo", contact: "abc", age: 20 },
{ _id: 2, name: "bar", contact: "efg", age: 30 },
{ _id: 3, name: "baz", contact: "hij", age: 40 },
];
const fakeRequest = () => new Promise( resolve =>
setTimeout( () => resolve( employees ), 1000)
);
class App extends React.Component {
state = {
employees: [],
showEmployees: false,
};
componentDidMount() {
fakeRequest()
.then(employees => this.setState({ employees }))
}
toggleEmployees = () => this.setState( prevState => ({
showEmployees: !prevState.showEmployees,
}))
render() {
const { showEmployees } = this.state;
const employees = this.state.employees.map(employee => (
<div style = {{ border: "1px solid black"}} key = {employee._id}>
<h3>Name: {employee.name}</h3>
<p>Contact: {employee.contact}</p>
<p>{employee.age}</p>
</div>
));
return (
<div>
<p>Data will be fethced automatically in a second but will be hidden by default. Button click toggles this state.</p>
<button
onClick = {this.toggleEmployees}
>
{
showEmployees ? "Hide Employees" : "Show Employees"
}
</button>
{this.state.showEmployees && employees}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "root"></div>
Это великое усилие, проявленное тобой, чувак. Продолжайте в том же духе. Надеюсь, решение сработает для @manish
Спасибо за оценку.
Большое спасибо, решение, которое вы предоставили, сработало для меня. Высоко ценю ваши усилия.
Что значит не работает? Вы можете привести минимальный пример кода? Где именно вы запрашиваете серверную часть?