ReactCRUDTable UpdateForm 提交表单不起作用

Question

警告：组件正在更改要控制的非受控输入。这可能是由于值从未定义更改为已定义值引起的，这不应该发生。在组件的生命周期内决定使用受控输入元素还是不受控输入元素。更多信息：https://reactjs.org/link/controlled-components

我的更新表单的提交按钮不起作用。单击时它不起作用。当点击某一行的更新按钮时，它会给出上述警告。

import React, { Component } from "react";
    import ReactDOM from "react-dom";
    import CRUDTable, {
      Fields,
      Field,
      CreateForm,
      UpdateForm,
      DeleteForm
    } from "react-crud-table";
    import axios from 'axios'
    import { useState, useEffect } from "react";
    // Component's Base CSS
    import "./index.css";
    import { render } from "@testing-library/react";
    let styles = {
      container: { margin: "auto", width: "fit-content" }
    };
     
     var tasks = [
        {
          id: 1,
          title: "Create an example",
          description: "Create an example of how to use the component"
        },
        {
          id: 2,
          title: "Improve",
          description: "Improve the component!"
        }
      ];
      
    
    
    
    let count = tasks.length;
    const service = {
      
      create: task => {
        const headers = {
          'Content-Type': 'application/json',
        }
        
        axios.post('http://127.0.0.1:8000', {
          "name": task.name,
          "roll_no": task.roll_no,
          "email": task.email,
          "phone":task.phone,
          "address": task.address
            }, {
            headers: headers
          })
        .then((response) => {
          alert(response.data);
        }, (error) => {
          alert(error);
        });
        
        return Promise.resolve(task);
      },
      update: (data) => {
        console.log(data)
        alert("update")
        const stud=this.state.students.find(t => t.id === data.id)
        stud.name=data.name;
    
        alert("update")
        console.log(id)
        alert("update")
        const headers = {
          'Content-Type': 'application/json',
        }
        //const url='http://127.0.0.1:8000/'+String(task.roll_no)+'/';
        /*axios.put(url, {
          "name": task.name,
          "roll_no": task.roll_no,
          "email": task.email,
          "phone":task.phone,
          "address": task.address
            }, {
            headers: headers
          })
        .then((response) => {
          alert(response.data);
        }, (error) => {
          alert(error);
        });*/
        return Promise.resolve(stud);
      },
      delete: data => {
        const task = tasks.find(t => t.id === data.id);
        tasks = tasks.filter(t => t.id !== task.id);
        return Promise.resolve(task);
      }
    };
    const SORTERS = {
      NUMBER_ASCENDING: mapper => (a, b) => mapper(a) - mapper(b),
      NUMBER_DESCENDING: mapper => (a, b) => mapper(b) - mapper(a),
      STRING_ASCENDING: mapper => (a, b) => mapper(a).localeCompare(mapper(b)),
      STRING_DESCENDING: mapper => (a, b) => mapper(b).localeCompare(mapper(a))
    };
    const getSorter = data => {
      const mapper = x => x[data.field];
      let sorter = SORTERS.STRING_ASCENDING(mapper);
    
      if (data.field === "id") {
        sorter =
          data.direction === "ascending"
            ? SORTERS.NUMBER_ASCENDING(mapper)
            : SORTERS.NUMBER_DESCENDING(mapper);
      } else {
        sorter =
          data.direction === "ascending"
            ? SORTERS.STRING_ASCENDING(mapper)
            : SORTERS.STRING_DESCENDING(mapper);
      }
    
      return sorter;
    };
    class Example extends React.Component{
      constructor(props) {
      super(props);
      this.state = {
            students:[]
      };
    }
    componentDidMount(){
        axios.get('http://127.0.0.1:8000/').then((response) => {
          console.log(response.data);
          var studs=[]
          var studs2=[]
          studs.push(response.data.students)
          console.log(studs[0]['0'])
          for (var i=0;i<studs[0].length;i++){
            studs2.push(studs[0][String(i)])
          }
          this.setState({
            students:studs2
          })
          console.log(response.status);
          console.log(response.statusText);
          console.log(response.headers);
          console.log(response.config);
        });
    }
    fetchItems=(payload) => {
      let result = Array.from(this.state.students);
      result = result.sort(getSorter(payload.sort));
      return Promise.resolve(result);
    }
    update= (data) => {
      alert("update")
      var id=this.state.students.find(t => t.id === data.id)
      alert("update")
      console.log(id)
      alert("update")
      const headers = {
        'Content-Type': 'application/json',
      }
    }
    change(){
    
      console.log("update")
    }
    please= (data)=> {
      alert("update")
      var id=this.state.students.find(t => t.id === data.id)
      alert("update")
      console.log(id)
      alert("update")
      const headers = {
        'Content-Type': 'application/json',
      }
    }
    render() {
      const DescriptionRenderer = ({ field }) => <textarea {...field} />
      return (
        <div style={styles.container}>
        <CRUDTable
          caption="Students"
          fetchItems={payload => this.fetchItems(payload)}
        >
          <Fields>
            <Field name="id" label="Id" hideInCreateForm />
            <Field name="name" label="Name" placeholder="Name" />
            <Field
              name="roll_no"
              label="Roll_no"
              
            />
            <Field
              name="email"
              label="Email"
              type="email"
            />
            <Field
              name="phone"
              label="Phone"
            />
            <Field
              name="address"
              label="Address"
              render={DescriptionRenderer}
            />
          </Fields>
          <CreateForm
            title="Student"
            message="Add new Student!"
            trigger="Add Student"
            onSubmit={task => service.create(task)}
            submitText="Add"
            validate={values => {
              const errors = {};
              if (!values.name || !values.phone) {
                errors.name = "Provide all details";
              }
    
              return errors;
            }}
          />
          <UpdateForm
            title="Update Student" 
            message="Update Student Info"
            trigger="Update"
            onSubmit={task => service.update(task)}
            submitText="Update"
            validate={values => {
              const errors = {};
    
              if (!values.name) {
                errors.name= "Please, provide id";
              }
    
              return errors;
            }}
          />
    
          <DeleteForm
            title="Task Delete Process"
            message="Are you sure you want to delete the task?"
            trigger="Delete"
            onSubmit={task => service.delete(task)}
            submitText="Delete"
            validate={values => {
              const errors = {};
              if (!values.id) {
                errors.id = "Please, provide id";
              }
              return errors;
            }}
          />
        </CRUDTable>
      </div>
      );
    }
    }
    
    export default Example;

Answer 1

要在您的状态中设置值，您必须为您的状态属性声明一个初始值。对于要控制的输入，它的值必须与状态属性的值相对应。