Question

从API获取数据后，我想将其显示为输入，然后在DB中进行编辑和更新。我以为除了redux状态外，我还应该使用local状态，但是这里有些人说这不是好习惯。因此，我该如何处理我的 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

所以我该如何处理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-但是，我怀疑那是您想要的。

Answer 2

我找到了解决方案。我使用了静态方法 getDerivedStateFromProps ，该方法在每次更改组件的prop时都会调用。

 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（）。

React Component编辑数据

2 个答案: