reactjs 如何修复“不建议在严格模式下使用UNSAFE_componentWillMount,因为这可能会指示代码中存在错误”?

wz1wpwve  于 2022-12-26  发布在  React
关注(0)|答案(2)|浏览(178)

我在react项目中使用redux表单,这是一个应用程序组件,它初始化了redux表单:

import { Field, reduxForm } from 'redux-form';

const onSubmit = (values) => {
    alert(JSON.stringify(values));
};
function App(props) {
    return (
        <div className="App">
            <form onSubmit={props.handleSubmit}>
                <div>
                    <label htmlFor="firstName">First Name</label>
                    <Field name="firstName" component="input" type="text" />
                </div>
                <div>
                    <label htmlFor="lastName">Last Name</label>
                    <Field name="lastName" component="input" type="text" />
                </div>
                <div>
                    <label htmlFor="email">Email</label>
                    <Field name="email" component="input" type="email" />
                </div>
                <button type="submit">Submit</button>
            </form>
            {props.number}
            <button onClick={() => props.callAction()} />
        </div>
    );
}

App = reduxForm({
    form: 'contact',
    onSubmit
})(App);

但我在控制台中得到这个错误,这是来自React严格模式:

Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code.
* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at:state

Please update the following components: Field, Form(App)

如何修复此错误?

deyfvvtc

deyfvvtc1#

正如apokryfos评论的那样,似乎有一个open issue关于这个问题,我应该等待redux-form的作者发布更新,或者寻找一个替代库(因为这个库的作者似乎说我们不应该在大多数情况下使用它)。

lhcgjxsq

lhcgjxsq2#

在我的情况下,我认为问题是由于"react-helmet"的Helmet
为了解决这个问题,我使用了react-helmet-async,并将<HelmetProvider>中的所有内容都 Package 在jsx return下
下面是示例代码

问题代码

import React from "react";
import { Helmet } from "react-helmet";

function XYZ(){
return(
 <div>
   <Helmet>
     <meta />
   </Helmet>
 
   <p>...</p>
 </div>
)
}

带修复的代码

import React from "react";
import { Helmet, HelmetProvider } from 'react-helmet-async';

function XYZ(){
return(
<HelmetProvider>
  <div>
    <Helmet>
      <meta />
    </Helmet>
 
    <p>...</p>
  </div>
</HelmetProvider>

)
}

相关问题