ReactJS useGesture:typeerror集合不是函数

Question

我一直在尝试从useGesture文档中获得该示例

但我一直得到类型错误集不是一个函数错误，无论我尝试

import './App.css';
import React, {useState} from "react"
import { useSpring, animated } from "react-spring"
import { useDrag } from "react-use-gesture"
import data from './data';
function App() {
const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 }))
// Set the drag hook and define component movement based on gesture data
const bind = useDrag(({ down, movement: [mx, my] }) => {
set({ x: down ? mx : 0, y: down ? my : 0 })
})
// Bind it to a component
return <animated.div {...bind()} style={{ x, y }} className="box"/>
}
export default App;

我的版本是最新的

{
"name": "gesture-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"react-spring": "^9.0.0",
"react-use-gesture": "^9.1.3",
"web-vitals": "^1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

我尝试过很多不同的版本，但总是会出现这个错误。有什么想法吗？

Answer 1

我今天也谈到了这个问题。显然，useSpring现在的第二个返回值(如今天安装的(返回"；弹簧对象"；。尝试

function App() {
const [{ x, y }, spring] = useSpring(() => ({ x: 0, y: 0 }));
// Set the drag hook and define component movement based on gesture data
const bind = useDrag(({ down, movement: [mx, my] }) => {
spring.set({ x: down ? mx : 0, y: down ? my : 0 });
});
// Bind it to a component
return <animated.div {...bind()} style={{ x, y }} className="box" />;
}

依赖项是

"react-spring": "^9.0.0",
"react-use-gesture": "^9.1.3",

这可能没有多大帮助，随着向9.0.0的过渡，还有更多的更改尚未进入文档。我的建议是转到示例，并检查沙盒中的有效版本组合。