javascript - 对于这个 angularjs 代码，reactjs 中的等效代码是什么

Question

我正在开发一个基于 angularjs 的网站。现在我想将一些片段转换为reactjs，但我从未使用过Angular，所以显然我在理解用Angularjs编写的一些代码时遇到了问题。我理解这里编写的一些代码，因为它用于保存帖子并在未保存时显示错误。但我不明白 $scope 以及如何将这段代码转换为 react 。我希望有人能帮助我

$scope.savepost=function(){
    $scope.postdata={}
    $scope.postdata['postTitle']=$scope.postTitle
    $scope.postdata['postDescription']=$scope.postDescription
    console.log($scope.postId)
    if($scope.postId==null){
        return $http.post('/api/saveposts',$scope.postdata).then(function(response){
            if(response.status==200){
                $scope.postId=response.data;
                toaster.pop('success','post saved successfully!')                    
            }else{                
                toaster.pop('danger','An error has occured while saving the post. Please try again')                                        
            }
        });
    }else{
        $scope.postdata['postId']=$scope.postId        
        return $http.post('/api/updateposts',$scope.postdata).then(function(response,status){
            if(response.status==200){
                toaster.pop('success','post saved successfully!')                                        
            }else{
                toaster.pop('danger','An error has occured while updating the post. Please try again')                                                            
            }
        });
    }
}

Answer 1

它看起来像这样:

// destructure postId from props
const SomeFormComponent = ({ postId }) => {

  const [postState, setPostState] = useState({title: '', description: ''})

  /*
  This example assumes you've set your input values to postState
  */

  const handleRequest= async (url) => {
    // copy all the input values set to state
    const post = {...postState}
    // this will be passed into fetch
    const request = {
      method: 'POST'
      headers: {
        'Content-Type': 'application/json'
      }
    }

    if(postId != null) post['id'] = postId

    try {
      // use fetch, stringify json
      const response = await fetch(url, { ...request, body: JSON.stringify(post )})
      // handle json response
      const data = await response.json()
      if (data.status == 200) {
        toaster.pop('success', 'post saved successfully!')
        /*
           Do something with the response
        */
      } else {
        toaster.pop('danger', 'An error has occurred while updating the post. Please try again')
      }
    } catch(ex) => {
      console.error(ex.stack)
      toaster.pop('danger', 'An error has occurred while updating the post. Please try again')
    }
  }



  const handlePost = () => {
    if(postId == null) {
        return handleRequest('/api/savepost')
    }
    return handleRequest('/api/updatepost')

  }
  return (<button onClick={handlePost}>Save</button>)
}