我在 React 表单中遇到了这个问题。在输入字段中输入或删除值后,我在控制台中收到红色警告。如果我注释掉 validate Prop 一切正常。
Warning: Cannot update a component from inside the function body of a different component.
import { Field, reduxForm } from 'redux-form';
const required = value => (value ? undefined : 'Required field')
const renderField = ({
input,
label,
type,
meta: { touched, error, warning }
}) => (
<div>
<label>{label}</label>
<div>
<input {...input} placeholder={label} type={type} />
{touched &&
((error && <span>{error}</span>) ||
(warning && <span>{warning}</span>))}
</div>
</div>
)
function LoginForm(props) {
const { handleSubmit } = props;
return (
<form onSubmit={handleSubmit} >
{console.log("LOGIN FORM PROPS", props)}
<Field
label="Username"
name="username"
component={renderField}
type="text"
placeholder="username"
validate={[required]}
/>
<Field
label="Password"
name="password"
component={renderField}
type="password"
placeholder="password"
validate={[required]}
/>
<button type='submit'>Submit</button>
</form>
)
}
export default reduxForm({
form: 'loginForm'
})(LoginForm)
最佳答案
更新react
和react-dom
版本16.13.1
,移除警告
更多细节在这里找到 -> https://github.com/redux-form/redux-form/issues/4619
更新 react 和 react-dom 版本后如果警告仍然存在则有两种情况
案例一
这是因为 react-hot-loader
。因此,在 webpack.config.js
react-hot-loader
替换为 @pmmmwh/react-refresh-webpack-plugin
案例二
这是因为@hot-loader/react-dom
,@hot-loader/react-dom
还在16.13.0
版本上,与 react@16.13.1
不兼容,所以,在 webpack.config.js
中替换 @hot-loader/react-dom
别名,如下所示例子
webpack.config.js
//replace @hot-loader/react-dom with react-dom only
...
resolve: {
alias: {
'react-dom': 'react-dom',
},
}
...
关于reactjs - redux-form 警告无法从不同组件的函数体内部更新组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60563405/