mercredi 8 juillet 2020

How to fix in ReactJS Using UNSAFE_componentWillReceiveProps in strict mode is not recommended

I want to create a simple contact form in ReactJS but I see in the inspector console this lines of warning:

Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See some url for details.

* 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: some web

Please update the following components: Wrapper index.js:1
Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the Wrapper component.

Can I get some example how to fix this warnings.

My code from contact form:

import React, { Component } from 'react'
import * as emailjs from 'emailjs-com'
import { Button, Form, FormGroup, Label, Input } from 'reactstrap'
import { Container } from 'reactstrap';

class ContactForm extends Component {
  state = {
    name: '',
    email: '',
    subject: '',
    message: '',
  }
  
  handleSubmit(e) {
    e.preventDefault()    

    const { name, email, subject, message } = this.state    

    let templateParams = {
      from_name: name,
      to_name: 'some@gmail.com',
      from_mail: email,
      subject: subject,
      message_html: message,
     }     
     
     emailjs.send(
      'gmail',
      'template_id',
       templateParams,
      'user_id'
     )     
     
     this.resetForm()
 }
 resetForm() {
    this.setState({
      name: '',
      email: '',
      subject: '',
      message: '',
    })
  }
  
  handleChange = (param, e) => {
    this.setState({ [param]: e.target.value })
  }
  
  render() {
    return (
      
      <div>
          <Container>

          <Form onSubmit={this.handleSubmit.bind(this)}>
            <FormGroup controlid="formBasicEmail">
              <Label className="text-muted">Email address</Label>
              <Input
                type="email"
                name="email"
                value={this.state.email}
                className="text-primary"
                onChange={this.handleChange.bind(this, 'email')}
                placeholder="Enter email"
              />
            </FormGroup>
            <FormGroup controlid="formBasicName">
              <Label className="text-muted">Name</Label>
              <Input
                type="text"
                name="name"
                value={this.state.name}
                className="text-primary"
                onChange={this.handleChange.bind(this, 'name')}
                placeholder="Name"
              />
            </FormGroup>
            <FormGroup controlid="formBasicSubject">
              <Label className="text-muted">Subject</Label>
              <Input
                type="text"
                name="subject"
                className="text-primary"
                value={this.state.subject}
                onChange={this.handleChange.bind(this, 'subject')}
                placeholder="Subject"
              />
            </FormGroup>
            <FormGroup controlid="formBasicMessage">
              <Label className="text-muted">Message</Label>
              <Input
                type="textarea"
                name="message"
                className="text-primary"
                value={this.state.message}
                onChange={this.handleChange.bind(this, 'message')}
              />
            </FormGroup>
            <Button variant="primary" type="submit">
              Submit
            </Button>
          </Form>

          </Container>
          </div>
      
    )
  }
}

export default ContactForm

I not have componentDidMount but I dont know how to create and which part of code to put in the componentDidMount if this is the problem ?




Aucun commentaire:

Enregistrer un commentaire