super got strikethrough in React

user_14189521 0
Viewed 2407

Code

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import axios from 'axios';
import { connect } from 'react-redux';
import * as actions from '../../reducks/auth/actions';
import CircularProgress from "@material-ui/core"

class Add_Want_Item_Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      //   #インプット情報用
      info: {
        name: '',
        owner: '',
        keyword1: '',
        keyword2: '',
        keyword3: '',
        bland: '',
        url: '',
      },
      //   Validation用
      // 　urlは必須項目ではないのでValidationには含めない
      message: {
        name: '',
        keyword1: '',
        keyword2: '',
        keyword3: '',
        bland: '',
      },
    };
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    axios
      .get('http://localhost:8000/api/user/' + this.state.uid)
      .then((res) => console.log(res))
      .catch((err) => console.log(err));
  }

  handleChange(e) {
    const name = e.target.name;
    const value = e.target.value;
    const { info, message } = this.state;
    this.setState({
      info: { ...info, [name]: value },
    });
    this.setState({
      message: { ...message, [name]: this.validator(name, value) },
    });
  }

  ////

  ...

  ////

  render() {
    const { info, message } = this.state;
    return (
      <div>
        <label>商品名</label>
        <input name="name" type="text" value={this.state.info.name} onChange={this.handleChange} />
        <p>{this.state.message.name}</p>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    uid: state.uid,
  };
};

export default connect(mapStateToProps)(Add_Want_Item_Form);

Problem

super gets strikethrough in React although that doesn't show up in stackoverflow. I am using VS Code (1.49.0).

I just noticed after I installed @material-ui/core. Honestly, I cannot say exactly when this happened.

I guess the cause is not @material-ui/core but I don't know what causes this. In addition to that, I don't know what effects it has to my project.

What　does it mean? And what happens this strikethrough? Would you please teach me them?

Thank you very much.

reactjs
4 Answers
user_126352450

IllusionMH posted this solution in this GitHub thread. You can add

/** @param {Record<string, any>} props */

above the constructor function as follows:

class Example extends React.Component {
    /** @param {Record<string, any>} props */
    constructor(props) {
        super(props);
    
        console.log(props.message);
        console.log(this.props.message);
    }
    // ...
}

I am not a TypeScript expert so cannot explain exactly why it works, I assume there is a type definition somewhere that is not handling the constructor or super function correctly and the comment overrides it and tells Typescript to allow the super function to override it and accept the props parameter, similar to how !important tells CSS to give a style precedence or //prettier-ignore tells prettier to ignore the next line of code though I am sure someone more knowledgeable than myself can give a more detailed or accurate explanation.

user_135961130

It appears on my code as well. I used VSCode version 1.49.0 and when I hover to that strikethrough, in essence it said that:

The React constructor is marked as deprecated

and shows me this link: https://reactjs.org/docs/legacy-context.html

But I'm not sure that has something to do with legacy context. So I searched and found this fresh GitHub Issues discussion, they said it might an issue with the react typings.

Let's wait for an update from them.

user_103776400

I think it may has to do with ES 6 syntax for React. Now you don't have to use the constructor nor the super in React.

For example, you can write

export default class ExpenseForm extends React.Component {
    state ={
        description:'',
        amount:''
    }
}

VS Code may detect the unnecessary use of constructor and super that is crossed out.

user_78302860
Related