我是React的新手，我找到了一个关于我的项目的示例，我正在尝试运行它，但是我得到了 “无效的钩子调用。只能在功能组件的主体内部调用钩子。这可能是由于以下原因之一导致的： 1.您的React和渲染器版本可能不匹配（例如React DOM） 2.您可能违反了《钩子规则》 3.您可能在同一应用程序中拥有多个React副本”
我在互联网上寻找了一些解释，但它们与我的代码不匹配。那么我的代码有什么问题呢？
getProduct = (response, allBarcodes) => {
const context = this;
let buffer = [];
axios({
method: "post",
url: "/productImages",
data: { barcode: allBarcodes },
config: { headers: { "Content-Type": "multipart/form-data" } }
})
.then(function(response) {
console.log(response);
buffer.push(<p>Search Result:</p>);
buffer.push(<br />);
response.data.map(data => {
console.log(data);
data.map(data => {
buffer.push(
<Link to={"details/" + data.BARCODE}>
<img
className="similarProduct"
src={data.IMAGELINK.split("||")
.reverse()
.pop()}
/>
</Link>
);
context.setState({ message: buffer });
});
});
})
.catch(function(response) {
console.log(response);
context.setState({ message: "Please try again" });
});
};
getSearchItem = id => {
const context = this;
context.setState({ message: "Searching..." });
axios({
method: "post",
url: "/searchSelectedItem",
data: {
img_url: this.state.coordinate[id].img,
coordinate: this.state.coordinate[id]
},
config: { headers: { "Content-Type": "multipart/form-data" } }
})
.then(function(response) {
console.log(response);
let allBarcodes = "";
response.data.map(
data => (allBarcodes += data.product.productLabels[3].value + ",")
);
context.getProduct(response, allBarcodes);
})
.catch(function(response) {
console.log(response);
});
};
onDrop = files => {
this.setState({
message: "Loading...",
image: "",
firstItemCoordinate: {},
files
});
let file = new FormData();
file.append("file", files[0]);
const context = this;
axios({
method: "post",
url: "/boundingBox",
data: file,
config: { headers: { "Content-Type": "multipart/form-data" } }
})
.then(function(response) {
if (response.status !== 400) {
context.setState({ coordinate: response.data });
context.state.coordinate.map(coordinate =>
context.setState({ firstItemCoordinate: coordinate })
);
console.log(context.firstItemCoordinate);
context.setState({ message: "" });
let image = new window.Image();
image.src = context.state.firstItemCoordinate.img;
image.onload = () => {
context.setState({
image: image
});
};
if (context.state.coordinate.length === 0) {
context.setState({ message: "Object not found" });
}
} else {
context.setState({ message: "Please try again" });
}
})
.catch(function(response) {
context.setState({ message: "Please try again..." });
});
};
render() {
return (
<div>
<Dropzone
onDrop={this.onDrop}
accept="image/png, image/gif, image/jpg, image/jpeg"
>
{({ getRootProps, getInputProps }) => (
<section>
<div {...getRootProps({ className: "dropzone" })}>
<input {...getInputProps()} />
<button className="btn">Upload</button>
</div>
</section>
)}
</Dropzone>
<h3>{this.state.message}</h3>
<Stage
width={this.state.firstItemCoordinate.imgW}
height={this.state.firstItemCoordinate.imgH}
>
<Layer>
<Image className="productImg" image={this.state.image} />
{this.state.coordinate.map((item, id) => (
<Group key={id}>
<Rect
x={item.x1}
y={item.y1}
width={item.w}
height={item.h}
shadowBlur={5}
strokeWidth={1}
stroke={"red"}
onClick={() => {
this.getSearchItem(id);
}}
/>
<Label x={item.x1 + item.w - 40} y={item.y1 + item.h}>
<Tag
fill="black"
pointerDirection="down"
pointerWidth={10}
pointerHeight={10}
lineJoin="round"
shadowColor="black"
/>
<Text
text={item.name}
fontFamily="Calibri"
fontSize={18}
padding={5}
fill="white"
/>
</Label>
</Group>
))}
</Layer>
</Stage>
</div>
);
}
package.json
{
"name": "xtreme-react-admin",
"version": "0.1.0",
"private": true,
"homepage": "https://wrappixel.com/demos/free-admin-templates/xtreme-reactadmin-lite/",
"dependencies": {
"bootstrap": "4.1.3",
"chart.js": "2.7.2",
"history": "4.7.2",
"node-sass": "4.6.1",
"node-sass-chokidar": "1.3.3",
"npm-run-all": "4.1.3",
"react": "16.4.2",
"react-awesome-slider": "^1.0.1",
"react-chartjs-2": "^2.7.4",
"react-dom": "16.4.2",
"react-perfect-scrollbar": "1.2.0",
"react-router-dom": "4.2.2",
"react-scripts": "1.1.5",
"reactstrap": "6.4.0"
},
"scripts": {
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000",
"devDependencies": {
"eslint-plugin-react-hooks": "^2.0.1",
"react-alice-carousel": "^1.15.3"
}
}