Question

我目前正在使用.net核心后端构建React应用程序。我当前的问题在于旨在编辑文章的视图（仅由标题和描述组成）。在componentDidMount上，我从路线中获取路线参数ID，并从中获取服务器的商品（我已经验证了它可以正常工作）。我的问题是我的表单未填写所获取的数据。我的理解是，由于表单字段设置为this.state...，因此它们应该在状态更新时进行更新，但这不是我所看到的。我认为问题可能出在我在控制台中收到警告：

index.js：2177警告：组件正在更改以下项的受控输入隐藏为不受控制的类型。输入元素不应从控制到不受控制（反之亦然）。确定使用受控制或不受控制的输入元素组件。

我已经阅读了警告所指向的文档，但没有看到我的组件如何违反此规定。

我的组件下面是完整的：

import React, { Component } from 'react';
import CKEditor from 'react-ckeditor-component';

export class ArticlesEdit extends Component {
  displayName = ArticlesEdit.name

  constructor(props) {
    super(props);
    this.state = { 
        title: '',
        description: ''
     };

     this.handleSubmit = this.handleSubmit.bind(this);
  }

   componentDidMount () {
    const { id } = this.props.match.params;
    fetch(`https://localhost:44360/api/articles/${id}`)
      .then((article) => {
        this.setState({
            title: article.title,
            description: article.description
        });
      });
  }

  updateDescription(event){
    this.setState({description: event.target.value});
  }

  render() {
    return(
        <form onSubmit={this.handleSubmit} >
                <div className="form-group row" >  
                    <label className=" control-label col-md-12" htmlFor="Title">Title</label>  
                    <div className="col-md-4">  
                        <input className="form-control" type="text" id="title" name="title" defaultValue={this.state.title} required />  
                    </div>  
                </div >    
                <CKEditor activeClass="editor" content={this.state.description} events= {{"change": this.onEditorChange.bind(this) }} />
                <input type="hidden" id="description" name="description" value={this.state.description} onChange={this.updateDescription}/>
                <div className="form-group">  
                    <button type="submit" className="btn btn-default">Save</button>  
                </div >  
            </form >  
      );
  }

  onEditorChange(evt){
    var newContent = evt.editor.getData();
    this.setState({
      description: newContent
    });
  }

  handleSubmit(event) {  
    event.preventDefault();  
    const data = new FormData(event.target);  

    console.log(this.state.title);
    // POST request for Add employee.  
        fetch('https://localhost:44360/api/articles/', {  
            method: 'PUT',  
            body: data
        }).then((response) => response.json())  
            .then((responseJson) => {  
                this.props.history.push("/articles");  
            })  

}
}

Answer 1

您没有解析作为对componentDidMount中的提取的响应而获得的JSON。如果添加.then((response) => response.json())，它应该可以正常工作。

componentDidMount () {
  const { id } = this.props.match.params;

  fetch(`https://localhost:44360/api/articles/${id}`)
    .then((response) => response.json())
    .then((article) => {
      this.setState({
        title: article.title,
        description: article.description
      });
    });
}

您还需要在输入上使用value道具而不是defaultValue道具，以使其在您的状态下的值为title。

<input
  className="form-control"
  type="text" id="title"
  name="title"
  value={this.state.title}
  required
/>

React表单未填写获取的数据

1 个答案: