Блог

после получения данных из API я хочу отобразить их во входных данных, отредактировать и обновить их в БД. Я думал, что помимо состояния redux, я должен использовать также local state , но некоторые люди здесь говорят, что это не очень хорошая практика.Итак, как я могу обрабатывать свои методы 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);
  

Итак, как я могу обрабатывать свои методы 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 после каждого нажатия клавиши — однако я сомневаюсь, что это то, чего вы хотите.

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

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

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