为什么在下面的伪代码示例中,当容器更改foo.bar时,子不重新呈现?
Container {
handleEvent() {
this.props.foo.bar = 123
},
render() {
return <Child bar={this.props.foo.bar} />
}
Child {
render() {
return <div>{this.props.bar}</div>
}
}
即使我在修改Container中的值后调用forceUpdate(), Child仍然显示旧值。
export default function DataTable({ col, row }) {
const [datatable, setDatatable] = React.useState({});
useEffect(() => {
setDatatable({
columns: col,
rows: row,
});
/// do any thing else
}, [row]);
return (
<MDBDataTableV5
hover
entriesOptions={[5, 20, 25]}
entries={5}
pagesAmount={4}
data={datatable}
/>
);
}
这个例子使用useEffect在道具改变时改变状态。
在我的例子中,我正在更新传递给组件的加载状态。在按钮内的道具。加载是通过预期的(从假切换为真),但显示旋转器没有更新的三元。
我尝试添加一个键,添加一个状态,更新useEffect()等,但没有其他答案工作。
对我有效的是改变这一点:
setLoading(true);
handleOtherCPUHeavyCode();
:
setLoading(true);
setTimeout(() => { handleOtherCPUHeavyCode() }, 1)
我认为这是因为handleOtherCPUHeavyCode中的进程非常繁重和密集,所以应用程序会冻结一秒钟左右。添加1ms超时允许加载布尔值更新,然后繁重的代码函数可以完成它的工作。
考虑到道具的渲染限制和状态的增益,如果你使用反应钩子,你可以使用一些技巧。例如,您可以使用useEffect手动将道具转换为状态。这可能不是最好的做法,但在这些情况下是有帮助的。
import { isEqual } from 'lodash';
import { useEffect, useState } from 'react';
export const MyComponent = (props: { users: [] }) => {
const [usersState, setUsersState] = useState([]);
useEffect(() => {
if (!isEqual(props.users, usersState)) {
setUsersState(props.users);
}
}, [props.users]);
<OtherComponent users={usersState} />;
};
export default function DataTable({ col, row }) {
const [datatable, setDatatable] = React.useState({});
useEffect(() => {
setDatatable({
columns: col,
rows: row,
});
/// do any thing else
}, [row]);
return (
<MDBDataTableV5
hover
entriesOptions={[5, 20, 25]}
entries={5}
pagesAmount={4}
data={datatable}
/>
);
}
这个例子使用useEffect在道具改变时改变状态。
你必须使用动态组件。
在这个代码片段中,我们多次渲染子组件并传递key。
如果我们动态渲染一个组件多次,那么React不会渲染该组件,直到它的键被更改。
如果我们使用setState方法更改检查。它不会反映在子组件中,直到我们改变它的键。我们必须在child的状态上保存它然后相应地将它改为渲染child。
类父扩展组件{
状态= {
检查:真
}
呈现(){
回报(
< div className =“父”>
{
[1,2,3].map(
N => <div key={N}>
<孩子完成= {this.state。检查}/ >
< / div >
)
}
< / div >
);
}
}