错误：标识符已被声明如何解决？

问题描述

我在 React 应用程序中使用 Grapgql 进行查询。我有一个查询和变异，都在同一个组件中。因此，重复定义了error & data 的变量。因此它在 React 中显示错误，因为标识符已经声明

下面是组件的代码：

function displayUsers() {
  let { id } = useParams();
  const { loading,error,data } = useQuery(LOAD_USERS_BY_ID,{
    variables: { id: parseInt(id) },});

  const [deleteUserById,{ error,data }] = useMutation(DELETE_USER);

  const deleteUser = () => {
    deleteUserById({ variables: { id: id } });
  };

  useEffect(() => {
    if (data) {
      console.log(data);
      alert('Successful deletion');
      setTimeout(() => {
        <Redirect
          to={{
            pathname: '/view-users',}}
        />;
      },3000);
    }
  },[data]);

  console.log(typeof id);
  console.log(data);
  if (loading) return <h4>Loading data...</h4>;
  return (
    data && (
      <div className='row'>
        <div className='col s12 m6 offset-m3' style={{ marginTop: '50px' }}>
          <div className='card'>
            <div className='card-content'>
              <span className='card-title'>
                {data.getUsersById.firstName} {data.getUsersById.lastName}
              </span>
              <p>Registerd Email: {data.getUsersById.email}</p>
              <p>Registerd Password: {data.getUsersById.password}</p>
              <p>User Id : {data.getUsersById.id}</p>
              <br />
              <div className='card-action'>
                <button
                  onClick={deleteUser}
                  className='waves-effect waves-light btn-small right'
                >
                  Delete
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  );
}

如何克服？

解决方法

您可以像这样提供不同的名称

const { loading,error: userError,data: userData } = useQuery(LOAD_USERS_BY_ID,{
    variables: { id: parseInt(id) },});

然后在其余代码中使用新名称

或

const userQuery = useQuery(LOAD_USERS_BY_ID,});

然后在其余代码中使用 userQuery.data