单击按钮后如何显示来自mongodb的数据到reactjs？

Question

我正在使用express.js，mongodb，react.js和node.js制作反应项目。 并尝试从端口5000上运行的后端api获取数据。

当我使用postman检查api时，它正在工作。 数据显示在浏览器的控制台中。 此外，当我按下面代码中给出的“ 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.log({ employeeItem })}>Get</Button>
            <Button type="submit">Delete</Button>
          </form>
        </div>
      </div>
    );
  }
}

export default App;

在运行页面上

Answer 1

在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>