Javascript 反应错误:NotFoundError:未能执行';removeChild';在';节点';:要删除的节点不是此节点的子节点
我是新来的。当我使用search react应用程序时,我得到了如上所示的错误 用户列表 行动 从“./dispatcher/dispatcher”导入调度程序 我在这里使用的是通量反应程序。还包括通过jquery数据表显示的数据。Javascript 反应错误:NotFoundError:未能执行';removeChild';在';节点';:要删除的节点不是此节点的子节点,javascript,reactjs,Javascript,Reactjs,我是新来的。当我使用search react应用程序时,我得到了如上所示的错误 用户列表 行动 从“./dispatcher/dispatcher”导入调度程序 我在这里使用的是通量反应程序。还包括通过jquery数据表显示的数据。 错误发生在我第一次搜索时,假设给username='something',它在我的表中完美地显示出来。当我单击datatable列名或其附带的搜索时,问题就会出现,因为它会更改为我已经给出的伪数据。有时也会抛出上述错误。如果有人能提供帮助,那将是非常值得注意的。当您
错误发生在我第一次搜索时,假设给username='something',它在我的表中完美地显示出来。当我单击datatable列名或其附带的搜索时,问题就会出现,因为它会更改为我已经给出的伪数据。有时也会抛出上述错误。如果有人能提供帮助,那将是非常值得注意的。当您:
React
React
呈现的DOMReact
找不到先前渲染的DOM节点,因为它已经被外部脚本修改/删除 $(document).ready(function() {
$("#example").DataTable({
ordering: true
});
});
有一篇很好的文章可以与React
一起使用jquerydatatable
。您可以参考它并尝试解决您的问题,也可以尝试用React
版本的DataTable
(例如:)替换它
注意:避免同时使用
React
和JQuery
。从长远来看,这可能会产生问题。有什么办法可以修改dom吗?您能详细说明一下吗?使用什么修改DOM?反应还是外部脚本?我收到了这个错误。我把代码移到了一个入口,全部修复了。谢天谢地,现在是2021年,请不要使用jQuery使用jQuery没有什么错,只要它能达到目的。
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();
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);
}
);
}
$(document).ready(function() {
$("#example").DataTable({
ordering: true
});
});