Question

我已经在学习如何通过React从REST API中获取数据，我必须从父组件（App）召唤组件（用于提交的表单和用于获取数据的卡片），并且正在工作，所以我不得不推新到db并在我的卡片组件上获取新闻值，而只渲染卡片组件，渲染所有App（包括表单组件），我在做什么错人？

这是父组件

import React, { Component } from 'react';
import './App.css';
import SampleCard from './components/SampleCard';
import Form from './components/Form';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: []
    }
  }

  componentDidMount() {
    this.getTasks()
  }

  getTasks =_=> {
    fetch('http://localhost:4000/users')
    .then(response => response.json())
    .then(data => this.setState({ data: data.data }))
    .catch(err => console.log(err))
  }

  render() {

    return (
      <div>
        <form onSubmit={this.getTasks}>
        <Form />
        </form>
        {this.state.data.map((row, i) => (
          <div key={i}>
            <SampleCard row={row} />
          </div>
        ))}
      </div>

    )
  }


}

export default App;

这是表单组件

import React, { Component } from "react";

class Form extends Component {

    constructor(props) {
        super(props);
        this.state = {
            tasks: {
                task: '',
                status: ''
            }
        }
    }

    addTask = _ => {
        const { tasks } = this.state
        fetch(`http://localhost:4000/users/add?task=${tasks.task}&status=${tasks.status}`)
        .catch( err => console.log(err))
    }

    render() {
        const { tasks } = this.state
        return (
            <div className="Form container mt-3">
                <div className="input-group mb-3">
                    <div className="input-group-prepend">
                        <span className="input-group-text" id="basic-addon1">
                            Define Task!
                        </span>
                    </div>
                    <input
                        type="text"
                        value={tasks.task}
                        onChange={e => this.setState({ tasks: { ...tasks, task: e.target.value } })}
                        className="form-control"
                        placeholder="Task"
                        aria-label="Task"
                        aria-describedby="basic-addon1"
                    />
                </div>
                <div className="input-group mb-3">
                    <div className="input-group-prepend">
                        <span className="input-group-text" id="basic-addon1">
                            Define Status!
                        </span>
                    </div>
                    <input
                        type="text"
                        value={tasks.status}
                        onChange={e => this.setState({ tasks: { ...tasks, status: e.target.value } })}
                        className="form-control"
                        placeholder="Status"
                        aria-label="Status"
                        aria-describedby="basic-addon1"
                    />
                </div>
                <button 
                type="Submit" 
                className="btn btn-outline-success d-flex mr-auto"
                onClick={this.addTask}
                >
                Add
                </button>
            </div>
        );
    }
}

export default Form;

这是卡的组成部分

import React, { Component } from "react";

export default class SampleCard extends Component {


  render() {
    return (
      <div className="container pt-5">
        <div className="col-xs-12">
          <div className="card">
            <div className="card-header">
            <h5 className="card-title">{this.props.row.task}</h5>
            </div>
            <div className="card-body">
              <h4 className="card-title">{this.props.row.created_at}</h4>
              {this.props.row.status === 1 ? (
                <h3 className="card-title">Pending</h3>
              ) : (
                <h3 className="card-title">Completed</h3>
              )}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Answer 1

您并没有阻止默认的提交行为。这样做

getTasks = (e) => {
e.preventDefault();
fetch('http://localhost:4000/users')
.then(response => response.json())
.then(data => this.setState({ data: data.data }))
.catch(err => console.log(err))
}

每当将提交与表单一起使用时，使用e.preventDefault()可以防止刷新。

刷新组件，并非所有视图都具有反应

1 个答案: