正在获取错误无效的钩子调用.只有在实现react-select之后，才能在函数组件的主体内部调用钩子

Question

我最近学习了更多React，这些钩子给我带来了一些问题，我知道这些问题可能不是最大的错误。但当我用react select库添加更多字段时，我开始得到：

错误：钩子调用无效。钩子只能在函数组件的主体内部调用。

我已经尝试过用他们的react钩子安装Eslint，但没有成功，尽管这是我运行网站时遇到的错误

import React, { Component } from "react";
import Select from 'react-select';
// This will require to npm install axios
import axios from 'axios';
const weekOptions = [
{ value: 0, label: 'Sunday'},
{ value: 1, label: 'Monday'},
{ value: 2, label: 'Tuesday'},
{ value: 3, label: 'Wednesday'},
{ value: 4, label: 'Thursday'},
{ value: 5, label: 'Friday'},
{ value: 6, label: 'Saturday'},
]
export default class Create extends Component {
// This is the constructor that stores the data.
constructor(props) {
super(props);
// Method binders
this.onChangeLocation = this.onChangeLocation.bind(this);
this.onChangeDeliveryLead = this.onChangeDeliveryLead.bind(this);
this.onChangeTruckSize = this.onChangeTruckSize.bind(this);
this.onChangeDeliveryAvailability = this.onChangeDeliveryAvailability.bind(this);
this.onChangeDeliveryFee = this.onChangeDeliveryFee.bind(this);
this.onSubmit = this.onSubmit.bind(this);
// Setting default state
this.state = {
loc_location: "",
loc_lead_time: "",
loc_truck_size: "",
loc_delivery_fee: "",
loc_delivery_availability: [],
};
}
// These methods will update the state properties.
onChangeLocation(e) {
this.setState({
loc_location: e.target.value,
});
}
onChangeDeliveryLead(e) {
this.setState({
loc_lead_time: e.target.value,
});
}
onChangeTruckSize(e) {
this.setState({
loc_truck_size: e.target.value,
});
}
onChangeDeliveryFee(e) {
this.setState({
loc_delivery_fee: e.target.value,
});
}
onChangeDeliveryAvailability(selectedOptions) {
this.setState({
loc_delivery_availability: selectedOptions
});
console.log(selectedOptions); // Testing
}
// This function will handle the submission.
onSubmit(e) {
e.preventDefault();
// When post request is sent to the create url, axios will add a new record(newperson) to the database.
const newLocation = {
loc_location: this.state.loc_location,
loc_lead_time: this.state.loc_lead_time,
loc_truck_size: this.state.loc_truck_size,
};
axios
.post("http://localhost:5000/location/add", newLocation)
.then((res) => console.log(res.data));
// We will empty the state after posting the data to the database
this.setState({
loc_location: "",
loc_lead_time: "",
loc_truck_size: "",
loc_delivery_fee: "",
loc_delivery_availability: [],
});
}
// This following section will display the form that takes the input from the user.
render() {
return (
<div style={{ marginTop: 20 }}>
<h3>Create New Location</h3>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>Position of location: </label>
<input
type="text"
className="form-control"
value={this.state.loc_location}
onChange={this.onChangeLocation}
/>
</div>
<div className="form-group">
<label>Max Delivery Lead Time: </label>
<input
type="text"
className="form-control"
value={this.state.loc_lead_time}
onChange={this.onChangeDeliveryLead}
/>
</div>
<div className="form-group">
<label>Truck Size: </label>
<input
type="text"
className="form-control"
value={this.state.loc_truck_size}
onChange={this.onChangeTruckSize}
/>
</div>

<div className="form-group">
<label>Delivery Availability: </label>
<Select 
options={weekOptions}
value={this.state.loc_delivery_availability}
onChange={this.onChangeDeliveryAvailability}
isMulti={true}
placeholder="Search days of the week"
/>
</div>

<div className="form-group">
<input
type="submit"
value="Create New Location"
className="btn btn-primary"
/>
</div>
</form>
</div>
);
}
}

一个快速的解决方案，也许一个小的解释，至少说明它与我所犯的错误有什么关系，会对我有很大帮助。非常感谢。

Answer 1

啊，这是个小东西。我在比我高的另一层安装了节点模块/客户端目录中，而我使用的react-select模块也在该项目级目录中而不是客户端目录中因此，它导致React的多个版本，而且客户端代码无法正确使用React-select不过现在一切都正常了