Error: Identifier already been declared. How can it be resolved?
Error: Identifier already been declared. How can it be resolved?
我正在使用 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>
)
);
}
如何克服?
您可以像这样提供不同的名称
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
我正在使用 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>
)
);
}
如何克服?
您可以像这样提供不同的名称
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