子组件中的ReactJs输入字段未更新

我得把这些部件拆了。首先是EditBook组件，它获取书籍的详细信息，然后将其传递给UpdateBook组件。但是，我的所有击键都没有绑定到inputbox。有人能帮我调试一下吗。 这是编辑书-

"use strict";

import React from "react";
import ListingHeader from "./listingHeader";
import Listings from "./listings";
import UpdateBook from "./updateBook";
import { Route,Switch } from 'react-router-dom';

const BOOK_DETAILS_API_ENDPOINT = 'http://localhost:5001/api/v1/books/';
const header = new Headers({
    'Access-Control-Allow-Origin':'*',
    'Content-Type': 'multipart/form-data'
});

class EditBook extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            book: {},
            isLoading: false,
            error: null,
        };
    }

    componentDidMount() {
        this.setState({ isLoading: true });

        fetch(BOOK_DETAILS_API_ENDPOINT+this.props.match.params.id,{headers:header})
        .then(response => {
            if (response.ok) {
              return response.json();
            } else {
              throw new Error('Something went wrong ...');
            }
        })
        .then(data => {
            this.setState({ book: data.data,isLoading: false })
        })
        .catch(error => this.setState({ error, isLoading: false }));
    }



    render() {
        const { book,isLoading,error } = this.state;
        return (
            <section className="bg-light" id="portfolio">
                <div className="container">
                    <br/><br/>
                    <UpdateBook book={book} />
                </div>    
          </section>
        );
    }

};

export default EditBook;

“严格使用”；
从“React”导入React；
从“/ListingHeader”导入ListingHeader；
从“/Listings”导入列表；
从“/UpdateBook”导入UpdateBook；
从“react router dom”导入{Route，Switch}；
施工手册\u详细信息\u API\uhttp://localhost:5001/api/v1/books/';
const header=新的头({
“访问控制允许来源”：“*”，
“内容类型”：“多部分/表单数据”
});
类EditBook扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
书籍：{}，
孤岛加载：false，
错误：null，
};
}
componentDidMount（）{
this.setState（{isLoading:true}）；
fetch（BOOK_DETAILS_API_ENDPOINT+this.props.match.params.id，{headers:header}）
。然后（响应=>{
if（response.ok）{
返回response.json（）；
}否则{
抛出新错误（'出了问题…'）；
}
})
。然后（数据=>{
this.setState（{book:data.data，isLoading:false}）
})
.catch（error=>this.setState（{error，isLoading:false}））；
}
render（）{
const{book，isLoading，error}=this.state；
返回(



);
}
};
导出默认编辑本；

更新本是这样的-

"use strict";

import React from "react";
import ListingHeader from "./listingHeader";
import Notifications, {notify} from 'react-notify-toast';
import InputBox from '../ui/inputBox';

const UPDATE_BOOK_API_ENDPOINT  =   'http://localhost:5001/api/v1/books/';
const headers = new Headers({
    'Access-Control-Allow-Origin':'*',
    'Content-Type': 'application/x-www-form-urlencoded'
});

class UpdateBook extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            book:{}
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    componentWillReceiveProps(newProps) {
        if (newProps.book !== this.props.book) {
            this.setState({book: newProps.book});
        }    
    }

    handleChange(e) {
       console.log(this.state.book[e.target.name]); 
       this.state.book[e.target.name] = e.target.value

       console.log(this.state.book[e.target.name]); 
    }

    handleSubmit(event) {        
        event.preventDefault();

        fetch(UPDATE_BOOK_API_ENDPOINT+this.state.book.id, {
            method: 'put',
            headers: headers,
            body:    'isbn_13='+this.state.book.isbn_13+'&isbn_10='+this.state.book.isbn_10+'&title='+this.state.book.title+'&publisher='+this.state.book.publisher+'&author='+this.state.book.author+'&page_count='+this.state.book.page_count+'&date_of_purchase='+this.state.book.date_of_purchase+'&classification='+this.state.book.classification+'&genre='+this.state.book.genre+'&first_published='+this.state.book.first_published+'&description='+this.state.book.description
        })
        .then(response => {
            if (response.ok) {
              return response.json();
            } else {
              throw new Error('Something went wrong ...');
            }
        })
        .then(data => {
            this.setState({ book: data.data,bookAdded: true });
            notify.show('book updated successfully!','success');
        })
        .catch(error => {
            notify.show('Something is wrong with something!','error');
            this.setState({ error, isLoading: false })
        });
    }

    render() {

        return (

            <section className="bg-light" id="portfolio">
                <div className="container">
                    <div className="row " >
                        <div className="col-xs-18 col-sm-12 col-md-12 card text-left">
                            <br/>
                            <h4 className="text-center">Edit {this.state.book.title}</h4>
                            <form onSubmit={this.handleSubmit} type="post" >
                                <Notifications />

                                <div className="centerDiv">
                                    <img src={this.state.book.thumbnail_url} className="form-control text-center"/>
                                    <input type="file" className="form-control-file" id="exampleInputFile" aria-describedby="fileHelp" name="thumbnail_url" />
                                </div>

                                <div className="form-group">
                                    <label htmlFor="isbn_10">ISBN_10 (10 characters long string)</label>
                                    <input type="text" className="form-control" id="isbn_10" placeholder="Enter ISBN 10" name="isbn_10" value={this.state.book.isbn_10 != null ?this.state.book.isbn_10:''} onChange={this.handleChange}/>
                                </div> 

                                <div className="form-group">
                                    <label htmlFor="title">Title</label>
                                    <input type="text" className="form-control" id="title" placeholder="Enter Title" name="title" value={this.state.book.title != null ?this.state.book.title:''} onChange={this.handleChange}/>
                                </div>

                                <div className="form-group">
                                    <label htmlFor="description">Description</label>
                                    <textarea type="text" className="form-control" id="description" placeholder="Enter description" name="description" onChange={this.handleChange} value={this.state.book.description != null ?this.state.book.description:''} rows="6">
                                    </textarea>
                                </div>

                                <div className="form-group">
                                    <label htmlFor="author">Author</label>
                                    <input type="text" className="form-control" id="author" placeholder="Enter Author" name="auhtor" value={this.state.book.author != null ?this.state.book.author:''} onChange={this.handleChange}/>
                                </div>

                                <div className="form-group">
                                    <label htmlFor="publisher">Publisher</label>
                                    <input type="text" className="form-control" id="publisher" placeholder="Enter Publisher" name="publisher" value={this.state.book.publisher != null ?this.state.book.publisher:''} onChange={this.handleChange}/>
                                </div>

                                <div className="form-group">
                                    <label htmlFor="page_count">Pages</label>
                                    <input type="text" className="form-control" id="page_count" placeholder="Enter Pages" name="isbn" value={this.state.book.page_count != null ?this.state.book.page_count:''} onChange={this.handleChange}/>
                                </div>

                                <div className="form-group">
                                    <label htmlFor="date_of_purchase">Date of purchase</label>
                                    <input type="text" className="form-control" id="date_of_purchase" placeholder="Enter Date of purchase" name="date_of_purchase" value={this.state.book.date_of_purchase != null ?this.state.book.date_of_purchase:''} onChange={this.handleChange}/>                     
                                </div>

                                <div className="form-group">
                                    <label htmlFor="first_published">First Published</label>
                                    <input type="text" className="form-control" id="first_published" placeholder="Enter First Published" name="first_published" value={this.state.book.first_published != null ?this.state.book.first_published:''} onChange={this.handleChange}/>
                                </div>

                                <div className="form-group">
                                    <label htmlFor="classification">Classification</label>
                                    <input type="text" className="form-control" id="classification" placeholder="Enter ISBN" name="classification" value={this.state.book.classification != null ?this.state.book.classification:''} onChange={this.handleChange}/>
                                </div>

                                <div className="form-group">
                                    <label htmlFor="genre">Genre</label>
                                    <input type="text" className="form-control" id="genre" placeholder="Enter Genre" name="genre" value={this.state.book.genre != null ?this.state.book.genre:''} onChange={this.handleChange}/>
                                </div>



                                <div className="form-group">
                                    <button type="submit" className="btn btn-primary">Update</button> &nbsp;&nbsp;&nbsp;&nbsp;
                                    <button type="button" className="btn btn-danger">Delete</button>
                                </div>    
                            </form>
                        </div>    
                    </div>
                </div>
        </section>    

        );
    }
};

export default UpdateBook;

“严格使用”；
从“React”导入React；
从“/ListingHeader”导入ListingHeader；
导入通知，{notify}来自“react notify toast”；
从“../ui/InputBox”导入InputBox；
const UPDATE\u BOOK\u API\u ENDPOINT='2〕http://localhost:5001/api/v1/books/';
const headers=新的头({
“访问控制允许来源”：“*”，
“内容类型”：“应用程序/x-www-form-urlencoded”
});
类UpdateBook扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
书籍：{}
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
组件将接收道具（新道具）{
if（newProps.book！==此.props.book）{
this.setState（{book:newProps.book}）；
}    
}
手变（e）{
log（this.state.book[e.target.name]）；
this.state.book[e.target.name]=e.target.value
log（this.state.book[e.target.name]）；
}
handleSubmit（事件）{
event.preventDefault（）；
获取（更新\u BOOK\u API\u端点+this.state.BOOK.id{
方法：'放'，
标题：标题，
正文：'isbn_13='+this.state.book.isbn_13+'&isbn_10='+this.state.book.title='+this.state.book.publisher='+this.state.book.publisher+'&author='+this.state.book.author+'&page_count='+this.state.book.page+'&date_采购日期='+this.state.book.book+'&classification='+this.state=+this.book.book.classification='ate.book.genre+'&first_published='+this.state.book.first_published+'&description='+this.state.book.description
})
。然后（响应=>{
if（response.ok）{
返回response.json（）；
}否则{
抛出新错误（'出了问题…'）；
}
})
。然后（数据=>{
this.setState（{book:data.data，bookAdded:true}）；
notify.show（'book updated successfully！'，'successfully'）；
})
.catch（错误=>{
notify.show（'Something'show！'，'error'）；
this.setState（{error，isLoading:false}）
});
}
render（）{
返回(


编辑{this.state.book.title}
ISBN_10（10个字符长的字符串）
标题
描述
作者
出版商
页
购买日期
首次出版
分类
体裁
 handleChange(e) {
       console.log(this.state.book[e.target.name]); 
       this.setState({ book[e.target.name]: e.target.value });

       console.log(this.state.book[e.target.name]); 
    }