我是新来的反应者。当我执行搜索响应应用程序时，出现类似上面的错误。我的组件是
import React, { Component } from "react";
import $ from "jquery";
import UserStore from "../../stores/UserStore";
import * as UserActions from "../../actions/UserActions";
import AddUser from "./AddUser";
import moment from "moment";
import Search from "../Search";
$.DataTable = require("datatables.net");
class UserList extends Component {
constructor() {
super();
this.getUsers = this.getUsers.bind(this);
this.state = {
users: UserStore.getAll()
};
// this.loadUsers();
}
componentDidMount() {
$(document).ready(function() {
$("#example").DataTable({
ordering: true
});
});
}
componentWillMount() {
UserStore.on("change", this.getUsers);
}
componentWillUnmount() {
UserStore.removeListener("change", this.getUsers);
}
getUsers() {
console.log(" get users called");
this.setState({
users: UserStore.getAll()
});
}
loadUsers() {
UserActions.getUsersList();
}
render() {
console.log("users " + JSON.stringify(this.state.users));
const userlistitem = this.state.users.map((user, index) => (
<tr key={index}>
<td scope="row">{index}</td>
<td>{user.name}</td>
<td>{user.username}</td>
<td>{user.email}</td>
<td>{moment(user.dob).format("DD-MM-YYYY")}</td>
<td>{user.address}</td>
<td>{user.mobile}</td>
<td>{user.branch}</td>
</tr>
));
return (
<div>
<Search />
<div
style={{
marginTop: 80,
marginLeft: 150,
marginRight: 150
}}
>
<div className="card text-white bg-info mb-3">
<div className="card-body">
<div className="d-flex justify-content-between">
<h5>User List</h5>
<div>
<button
style={{
marginTop: 10
}}
type="button"
className="btn btn-light "
data-toggle="modal"
data-target="#exampleModalCenter"
>
Add New User
</button>
</div>
</div>
</div>
</div>
<table id="example" className="table table-bordered table-striped ">
<thead className="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">User Name</th>
<th scope="col">Email</th>
<th scope="col">DOB</th>
<th scope="col">Address</th>
<th scope="col">Mobile</th>
<th scope="col">Branch</th>
</tr>
</thead>
<tbody>{userlistitem}</tbody>
</table>
<AddUser />
</div>
</div>
);
}
}
export default UserList;
import React, { Component } from "react";
import * as UserActions from "../actions/UserActions";
import "../css/search.css";
import ToggleDisplay from "react-toggle-display";
import UserList from "./User/UserList";
class Search extends Component {
constructor(props) {
super(props);
this.state = {
name: "",
username: "",
mobile: "",
usercreateddate: "",
show: false
};
this.handleInputChange = this.handleInputChange.bind(this);
this.searchquery = this.searchquery.bind(this);
}
handleInputChange(e) {
const target = e.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
}
searchquery = () => {
const search = {
name: this.state.name,
username: this.state.username,
mobile: this.state.mobile,
usercreateddate: this.state.usercreateddate
};
console.log("sdsdsd" + JSON.stringify(search));
UserActions.searchEvents(search);
this.setState({
show: true
});
};
// componentDidMount() {
// this.search("");
// }
render() {
return (
<div>
<br />
<div className="container card card-body">
<h3>Search Criteria</h3>
<div className="col-md-12 form-inline " style={{ padding: 8 }}>
<div className="col-md-3">
<input
name="name"
type="text"
class="form-control"
placeholder="Name"
id="name"
onChange={this.handleInputChange}
/>
</div>
<div className="col-md-3">
<input
name="username"
type="text"
class="form-control"
placeholder="User Name"
id="username"
onChange={this.handleInputChange}
/>
</div>
<div className="col-md-3">
<input
name="mobile"
type="number"
class="form-control"
placeholder="Mobile"
id="number"
onChange={this.handleInputChange}
/>
</div>
<div className="col-md-3">
<input
name="usercreateddate"
type="text"
class="form-control"
placeholder="User Created Date"
id="usercreateddate"
onChange={this.handleInputChange}
/>
</div>
</div>
<div>
<button
type="button"
className="btn btn-primary"
onClick={this.searchquery}
style={{ marginLeft: "491px", marginTop: "15px" }}
>
Search
</button>
</div>
</div>
</div>
);
}
}
export default Search;
import { EventEmitter } from "events";
import dispatcher from "../dispatcher/dispatcher";
class UserStore extends EventEmitter {
constructor() {
super();
dispatcher.register(this.handleActions.bind(this));
this.users = [
{
branch: "19",
name: "Javcbvcsim11",
username: "zxcv",
mobile: "5645654",
email: "demo@gmail.com111",
address: "Demo vcbvcbAddress1",
dob: "2020-11-06T00:00:00.000+0000"
},
{
branch: "19",
name: "Javcbvcsim11",
username: "zxcv",
mobile: "5645654",
email: "demo@gmail.com111",
address: "Demo vcbvcbAddress1",
dob: "2020-11-06T00:00:00.000+0000"
},
{
branch: "19",
name: "Javcbvcsim11",
username: "zxcv",
mobile: "5645654",
email: "demo@gmail.com111",
address: "Demo vcbvcbAddress1",
dob: "2020-11-06T00:00:00.000+0000"
}
];
console.log(" store constructor ");
}
createUser(newUser) {
this.users.push(newUser);
console.log("new users lenght " + this.users.lenght);
this.emit("change");
}
getAll() {
return this.users;
}
handleActions(action) {
switch (action.type) {
case "RECEIVE_USERS": {
this.users = action.users;
this.emit("change");
break;
}
case "CREATE_USER": {
this.createUser(action.newUser);
break;
}
case "SEARCH_USER": {
console.log("sadsadsadsadsadsadsadsadsad");
this.users = action.search;
this.emit("change");
break;
}
}
}
}
export default new UserStore();
从“ ../dispatcher/dispatcher”导入调度程序；
import { BASE_URL } from "../utils/AppConstants";
export function getUsersList() {
console.log("getting the data! ");
fetch(BASE_URL + "/users")
.then(res => res.json())
.then(
result => {
console.log("res " + result);
dispatcher.dispatch({ type: "RECEIVE_USERS", users: result });
},
// Note: it's important to handle errors here instead of a catch() block so that
// we don't swallow exceptions from actual bugs in components.
error => {
// here manage error and close loading;
console.log("getting error " + error);
}
);
}
export function createNewUser(user) {
console.log("post the data!");
fetch(BASE_URL + "/saveuser", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(user)
})
.then(res => res.json())
.then(
result => {
dispatcher.dispatch({ type: "CREATE_USER", newUser: user });
},
// Note: it's important to handle errors here instead of a catch() block so that
// we don't swallow exceptions from actual bugs in components.
error => {
// here manage error and close loading;
console.log("getting error " + error);
}
);
}
export function searchEvents(search) {
const url =
BASE_URL +
`/searchuser?name=${search.name}&username=${search.username}&mobile=${
search.mobile
}&usercreateddate=${search.usercreateddate}`;
console.log(url);
fetch(url)
.then(res => res.json())
.then(
result => {
console.log("res jdjdjdjdjdj " + JSON.stringify(result));
console.log("dfsfsf" + search);
dispatcher.dispatch({ type: "SEARCH_USER", search: result });
},
// Note: it's important to handle errors here instead of a catch() block so that
// we don't swallow exceptions from actual bugs in components.
error => {
// here manage error and close loading;
console.log("getting error " + error);
}
);
}
我在这里使用助焊剂反应程序。也通过jquery datatable显示的数据。 当我第一次使用用户名=“某物”进行搜索时，就会出现该错误，它在我的表中显示完美。当我单击数据表列名称或附带的搜索时，就会发生问题，它会更改为我已经给出的虚拟数据。有时还会抛出上述错误。如果有人可以帮助，那将是非常可观的。
答案 0 :(得分：1)
当您：
React React呈现的DOM React找不到先前渲染的DOM节点，因为它已经被外部脚本修改/删除了我认为这段代码是罪魁祸首：
$(document).ready(function() {
$("#example").DataTable({
ordering: true
});
});
有一篇不错的文章，可以将JQuery DataTable与React here一起使用。您可以参考它并尝试解决问题，也可以尝试用React版的DataTable版本（例如react-table）来替换它。
注意：避免同时使用React和JQuery。从长远来看，这可能会带来问题。