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

Question

我正在使用 Grapgql 在 React 应用程序中进行查询。我有一个查询和突变，都在同一个组件中。因此，定义的变量error & data会重复。因此，它在 React 中显示错误，因为 Identifiers already declared

下面是组件的代码：

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>
    )
  );
}

如何克服？

Answer 1

你可以像这样提供不同的名字

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

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

或

const userQuery = useQuery(LOAD_USERS_BY_ID, {
    variables: { id: parseInt(id) },
});

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