Question

在此编辑类中，我成功地从服务器获取了数据，并使用getDerivedStateFromProps设置了状态初始值，但是当我尝试编辑任何数据时，formdata不变。为什么会这样，我应该怎么解决？

import React, { PureComponent } from 'react'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'
import {getBook, updateBook, clearBook, deleteBook} from '../../actions'

class EditBook extends PureComponent {

    state = {
        formdata: {
            _id: this.props.match.params.id,
            name: '',
            author: '',
            review: '',
            pages: '',
            rating: 1,
            price: ''
        }
    }

    constructor(props) {
        super(props);
        this.props.dispatch(getBook(this.props.match.params.id));
    }

    handleInput = (e, name) => {
        let newFormdata = {...this.state.formdata}
        newFormdata[name] = e.target.value;
        this.setState({formdata: newFormdata});
    }

    submitForm = (e) => {
        e.preventDefault();
        this.props.dispatch(updateBook(this.state.formdata));
    }

    static getDerivedStateFromProps(nextProps, prevState) {

        let book = nextProps.book_reducer.book || '';
        return {
            formdata: {
                name: book.name,
                author: book.author,
                review: book.review,
                pages: book.pages,
                rating: book.rating,
                price: book.price
            }
        }

    }

    render() {
        //console.log(this.props);
        return (
            <div className="rl_container article">
                <form onSubmit={this.submitForm}>
                    <h2>Edit review</h2>
                    <div className="form_element">
                        <input type="text" placeholder="Enter Name" value={this.state.formdata.name} onChange={(e) => this.handleInput(e, 'name')} />
                    </div>
                    <div className="form_element">
                        <input type="text" placeholder="Enter Author" value={this.state.formdata.author} onChange={(e) => this.handleInput(e, 'author')} />
                    </div>
                    <textarea value={this.state.formdata.review} onChange={(e) => this.handleInput(e, 'review')} />
                    <div className="form_element">
                        <input type="number" placeholder="Enter Pages" value={this.state.formdata.pages} onChange={(e) => this.handleInput(e, 'pages')} />
                    </div>
                    <div className="form_element">
                        <select value={this.state.formdata.rating} onChange={(e) => this.handleInput(e, 'rating')}>
                            <option val="1">1</option>
                            <option val="2">2</option>
                            <option val="3">3</option>
                            <option val="4">4</option>
                            <option val="5">5</option>
                        </select>
                    </div>
                    <div className="form_element">
                        <input type="number" placeholder="Enter Price" value={this.state.formdata.price} onChange={(e) => this.handleInput(e, 'price')}/>
                    </div>
                    <button type="submit">Update Review</button>
                    <div className="delete_post">
                        <div className="button">Delete Review</div>
                    </div>

                </form>
            </div>
        )
    }
}

function mapStateToProps(state){
    return {
        book_reducer: state.book_reducer
    }
}

export default connect(mapStateToProps)(EditBook)

Answer 1

每次渲染前都会触发

getDerivedStateFromProps函数。

检查以下内容：https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

对于您的解决方案，您必须使用条件包装它。

static getDerivedStateFromProps(nextProps, prevState) {

    let book = nextProps.book_reducer.book || '';
    if (!prevState.formdata.name) {
      return {
            formdata: {
                name: book.name,
                author: book.author,
                review: book.review,
                pages: book.pages,
                rating: book.rating,
                price: book.price
            }
        }

    } 
  }
}

我无法使用getDerivedStateFromProps更新状态

1 个答案: