CODEWITHSUNDEEP
reactjs
Toshi023Yuki
Toshi023Yuki

Reputation: 345

super got strikethrough in React

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.

Upvotes: 6

Views: 2804

Answers (4)

feraleyebrows
feraleyebrows

Reputation: 385

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.

Upvotes: 1

passion
passion

Reputation: 455

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.

Upvotes: 0

Mehran
Mehran

Reputation: 106

It seems it is related to the new update of VS Code: https://code.visualstudio.com/updates/v1_49#_deprecated-tag-support-for-javascript-and-typescript

To fix the issue, for now, you can change super(props) to super() and it will fix it. It will not affect your codes if you are not using props in the codes inside constructor(), which means it will not affect your code since you have not used props inside constructor.

Upvotes: 4

alramdein
alramdein

Reputation: 901

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.

Upvotes: 0

Related Questions