React Component для редактирования данных

Question

после получения данных из API я хочу показать их во входах, отредактировать и обновить их в БД.Я подумал, что помимо избыточного состояния я должен использовать также локальное состояние, но некоторые люди здесь говорят, что это не очень хорошая практика. Так, как я могу обрабатывать свои методы onChange и как передавать обновленные данные в axios.put метод ???

class ArticleEdit extends Component {
     articleID = this.props.match.params.articleID; 

     state={
           title:'',
           text:'',
           imgs:[]
        }

onChange =(e)=>{}

componentDidMount(){
    this.props.getArticleDetails(this.articleID);//get data from API
}

render() {
   return (
        <Fragment>
            {this.props.article===undefined?(<Spin/>):
                (
                <div >
                    <div >
                        <Form onSubmit={this.handleSubmit}>
                            <Input name='title'
                                   value='this.props.article.title'  
                                    onChange={this.onChange}/>
                            <Textarea
                                name='text' 
                                value={this.props.article.title}
                                onChange={this.onChange}/>
                            <Button htmlType='submit'>Update</Button>
                        </Form>

                    </div>
                </div>
                )}    
        </Fragment>
    )
}
}

const mapStateToProps = state =>({
    article: state.articleReducer.articles[0],    
})

export default connect(mapStateToProps,{getArticleDetails}) 
                      (ArticleEdit);

Answer 1

Я нашел решение. Я использовал статический метод getDerivedStateFromProps , который вызывается каждый раз, когда изменяется реквизит вашего компонента.

 static getDerivedStateFromProps(nextProps, prevState){
    if(prevState.title===null && nextProps.article!==undefined){
        return{
            title:nextProps.article.title,
            text:nextProps.article.text
        }
    }
    return null;
}

после этого легко работать с onChange методом, который просто вызывает this.setState ().

Answer 2

Итак, как я могу обрабатывать свои методы onChange и как передавать обновленные данные в метод axios.put ???

Ну, если это буквально то, что вы хотите сделать, тогда вы можете сделатьэто так:

onChange = e => {
  try {
    const results = await axios.put(someurl, e.target.value)
    console.log('results', results)
  } catch(e) {
    console.log('err', e)
  }
}

Это будет вызывать axios.put после каждого нажатия клавиши - однако я сомневаюсь, что это то, что вы хотите.