reactjs - React 渲染何时发生
问题描述
我的项目使用dvajs
(基于redux和redux-saga),下面的代码是点击按钮后发送请求,通过connect改变状态,然后调用ant design组件message.error
an message.success
(类似于alert)提醒
import type { Dispatch } from 'umi';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import { message } from 'antd';
const tip = (type: string, content: string) => {
if (type === 'error') message.error(content, 5);
else message.success(content, 5);
};
const RegisterFC: React.FC<RegisterProps> = (props) => {
const { registerResponseInfo = {}, submitting, dispatch } = props;
const { status } = registerResponseInfo;
const handleSubmit = (values: RegisterParamsType) => {
dispatch({
type: 'register/register',
payload: { ...values },
});
};
return (
<div>
<ProForm
onFinish={(values) => {
handleSubmit(values as RegisterParamsType);
return Promise.resolve();
}}
>
<ProFormText/>
...
{
status === '1' && !submitting && (
tip('error',
intl.formatMessage({
id: 'pages.register.status1.message',
defaultMessage: 'error'
})
)
)
}
<<ProForm>/>
</div>
)
}
const p = ({ register, loading }: { register: RegisterResponseInfo, loading: Loading; }) => {
console.log(loading);
return {
registerResponseInfo: register,
submitting: loading.effects['register/register'],
};
};
export default connect(p)(RegisterFC);
当我点击按钮时,控制台提示:</p>
警告:渲染方法应该是 props 和 state 的纯函数;不允许从渲染触发嵌套组件更新。如有必要,在 componentDidUpdate 中触发嵌套更新。
当状态改变时组件不会重新渲染吗?提示功能会改变状态吗?
解决方案
解决方案:调用tip
外部return
tip
只是function
您正在调用的。return
您应该在代码的 JSX 部分之外调用它。useEffect
我认为在依赖于status
and的钩子中调用它是最有意义的submitting
。效果会在每次发生status
或submitting
更改时运行。如果status
is1
并且submitting
是falsy,那么我们调用tip
.
const RegisterFC: React.FC<RegisterProps> = (props) => {
const { registerResponseInfo = {}, submitting, dispatch } = props;
const { status } = registerResponseInfo;
const handleSubmit = (values: RegisterParamsType) => {
dispatch({
type: 'register/register',
payload: { ...values },
});
};
React.useEffect(() => {
if (status === '1' && !submitting) {
tip('error',
intl.formatMessage({
id: 'pages.register.status1.message',
defaultMessage: 'error'
})
);
}
}, [status, submitting]);
return (
<div>...</div>
)
}
解释
渲染方法应该是 props 和 state 的纯函数
组件的渲染部分(render()
在类组件或函数组件中)是您根据和return
的当前值为您的组件创建 JSX (React HTML) 标记的地方。它不应该有任何副作用。它创建并返回 JSX,仅此而已。props
state
调用tip
是一个副作用,因为它会修改全局antd
messsage
对象。这意味着它不应该在render
代码部分中。副作用通常在useEffect
钩子内部处理。
您正在尝试tip
像有条件地渲染组件一样有条件地渲染。问题是它tip
不是一个组件。函数组件是返回 JSX 元素的函数。 tip
是一个void
不返回任何内容的函数,因此您无法渲染它。
推荐阅读
- java - javax.net.ssl.SSLHandshakeException:握手期间远程主机关闭连接。重新启动服务器后它工作正常,但它再次出现
- reactjs - 返回 React Native 应用时调用函数
- javascript - Axios 方法将项目作为 null 传递,而不是实际值传递给我的猫鼬路线
- authentication - 如何在futurebuilder中设置用户ID
- ios - 错误:段控制中的索引超出范围
- django - 使用 OneToOneField 扩展模型
- javascript - 在Javascript中返回数组中所有值的索引数组
- excel - 通过单击按钮获取新工作表
- bluetooth-lowenergy - 我可以让 PC 支持 GATT 服务器(外设)角色吗?
- java - spring-boot-maven-plugin:2.0.0.RELEASE:repackage 失败:无法重命名