Reactjs type=“光盘” 风格={{ marginLeft:'120px', }}> {e.empName.toLowerCase()} ))} ))} ); }
您需要删除这一行Reactjs type=“光盘” 风格={{ marginLeft:'120px', }}> {e.empName.toLowerCase()} ))} ))} ); },reactjs,react-hooks,infinite-loop,react-functional-component,Reactjs,React Hooks,Infinite Loop,React Functional Component,您需要删除这一行setRecords(props.records),因为它会导致每次渲染时的状态发生变化,这就是您拥有的无限循环。 此外,您也不需要这一行const[records,setRecords]=useState([])并且您可以只显示道具中的记录,不需要在此处显示本地状态 此外,还有一些建议: 似乎您正在尝试同时构建和显示员工树,这非常困难,您应该在显示之前构建需要显示的数据。 要从数组构建树,请签出 它看起来是这样的: function Inhook(props) { co
setRecords(props.records)
,因为它会导致每次渲染时的状态发生变化,这就是您拥有的无限循环。此外,您也不需要这一行
const[records,setRecords]=useState([])代码>并且您可以只显示道具中的记录,不需要在此处显示本地状态
此外,还有一些建议:
- 似乎您正在尝试同时构建和显示员工树,这非常困难,您应该在显示之前构建需要显示的数据。
要从数组构建树,请签出
它看起来是这样的:
function Inhook(props) {
const initialState = 0;
const [records, setRecords] = useState([]);
const [count, setCount] = useState(initialState);
const [show, setShow] = useState(false);
const [store, setStore] = useState(initialState);
const [store1, setStore1] = useState(initialState);
setRecords(props.records);
function val(e) {
debugger;
console.log("hhh", e);
setStore(e);
if (store === store1) {
if (count == 0) {
setShow(true);
} else {
setShow(false);
}
} else {
setShow(true);
setCount(0);
}
setCount(count + 1);
// console.log(count,'counttt');
setStore1(e);
}
return (
<div>
<React.Fragment>
<br />
<div className="Tree">
<h1 style={{ textAlign: "center" }}>Employee Tree</h1>
<h3>Test Case 1</h3>
<h4>Employee Tree</h4>
{
(records.sort((x, y) => (x.empName.toLowerCase() > y.empName.toLowerCase()) * 2 - 1),
records.map(empId => {
return empId.managerId === 0 ? (
<ul key={empId.id}>
<li style={{ fontWeight: "Bold" }}>
{empId.empName.toLowerCase()}
<p>Employees of : {empId.empName.toLowerCase()}</p>
<ul>
{records.map(s =>
s.managerId === empId.id ? (
<li type="square" key={s.id}>
{s.empName.toLowerCase()}
{empId.managerId === s.id ? <p>Employees of :{s.empName.toLowerCase()}</p> : <p></p>}
{records.map(e =>
e.managerId === s.id ? (
<div>
{e.managerId === s.id ? <p>{val(s.id)}</p> : <p></p>}
{show ? <p>Employees of :{s.empName.toLowerCase()}</p> : <p></p>}
<li key={e.id} type="disc" style={{ marginLeft: "120px" }}>
{e.empName.toLowerCase()}
</li>
</div>
) : (
""
)
)}
</li>
) : (
""
)
)}
</ul>
</li>
</ul>
) : (
""
);
}))
}
</div>
</React.Fragment>
</div>
);
}
export default Inhook;
- 另一个建议是,JSX很容易分割成组件,所以要做到这一点,不要做出很长的渲染,这可能很难阅读,您可以这样分割:
hook中的函数(道具){
返回(
)
}
函数名(){
返回员工树
}
职能经理({employeeTree}){
返回(
{employeeTree.map(manager=>(
-
员工:{manager.empName.toLowerCase()}
))}
);
}
职能雇员({Employees}){
返回(
{employees.map(employeer=>(
-
{employee.empName.toLowerCase()}
{employee.children.map(e=>(
-
{e.empName.toLowerCase()}
))}
))}
);
}
function Inhook(props) {
const initialState = 0;
const records = props.records
const sortedRecords = records.sort((x, y) => (x.empName.toLowerCase() > y.empName.toLowerCase()) * 2 - 1)
const employeeTree = createEmployeeTree(sortedRecords)
return (
<div>
<React.Fragment>
<br />
<div className="Tree">
<h1 style={{ textAlign: 'center' }}>Employee Tree</h1>
<h3>Test Case 1</h3>
<h4>Employee Tree</h4>
{employeeTree.map(manager => {
return (
<ul key={manager.id}>
<li style={{ fontWeight: 'bold' }}>
<p>
Employees of :
{manager.empName.toLowerCase()}
</p>
<ul>
{manager.children.map(employee => (
<li type="square" key={employee.id}>
{employee.empName.toLowerCase()}
{employee.children.map(e => (
<div>
<li
key={e.id}
type="disc"
style={{
marginLeft:
'120px',
}}>
{e.empName.toLowerCase()}
</li>
</div>
))}
</li>
))}
</ul>
</li>
</ul>
);
})}
</div>
</React.Fragment>
</div>
);
}
// Convert flat array to tree, see https://stackoverflow.com/a/40732240/6695569
const createEmployeeTree = data => {
let hashTable = {};
data.forEach(
aData => (hashTable[aData.id] = { ...aData, children: [] })
);
let dataTree = [];
data.forEach(aData => {
if (aData.managerId) {
if (!hashTable[aData.managerId]) return;
hashTable[aData.managerId].children.push(hashTable[aData.id]);
} else dataTree.push(hashTable[aData.id]);
});
return dataTree;
};
// instead of this
const [count, setCount] = useState(initialState);
const [show, setShow] = useState(false);
function(){
setCount(0)
setShow(false)
...
if(count > 0) setShow(true)
else setShow(false)
}
//do This
const [count, setCount] = useState(initialState);
const show = count > 0
function Inhook(props) {
return (
<div>
<Title />
<Managers employeeTree={employeeTree} />
</div>
)
}
function Title(){
return <h1 style={{ textAlign: 'center' }}>Employee Tree</h1>
}
function Managers({ employeeTree }) {
return (
<ul>
{employeeTree.map(manager => (
<li style={{ fontWeight: 'bold' }}>
<p>Employees of :{manager.empName.toLowerCase()}</p>
<Employees employees={manager.children} />
</li>
))}
</ul>
);
}
function Employees({ employees }) {
return (
<ul>
{employees.map(employee => (
<li type="square" key={employee.id}>
{employee.empName.toLowerCase()}
{employee.children.map(e => (
<div>
<li
key={e.id}
type="disc"
style={{
marginLeft: '120px',
}}>
{e.empName.toLowerCase()}
</li>
</div>
))}
</li>
))}
</ul>
);
}