Estoy trabajando en un sitio web que se basó en angularjs. Ahora quiero convertir algunos fragmentos en reactjs y nunca usé angular, así que obviamente tengo problemas para entender algunos de los códigos escritos en angularjs. Entiendo parte del código escrito aquí, ya que se usa para guardar una publicación y mostrar un error cuando no se guarda. pero no entiendo $ scope y cómo convertir este fragmento de código para reaccionar. Espero que alguien me pueda ayudar

$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')                                                            
            }
        });
    }
}
0
UbuntuNewb 3 oct. 2019 a las 15:25

1 respuesta

La mejor respuesta

Se vería algo así:

// 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>)
}
1
Jay Kariesch 7 oct. 2019 a las 18:45