ReactのWarningをなんとかしたいっ!

Warningが気になったので修正していきます。

Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

親切なのか不親切なのか長々としたメッセージですが、要は「Input elements should not switch from controlled to uncontrolled (or vice versa). 」ですね。
controlledからuncontrolledになった(もしくは逆)

場所的には、この辺りで発生しているようで、

<input
  name="comment"
  type="text"
  value={this.state.comment}
/>

コードを追いかけた結果、このthis.state.commentがundefinedになってた

問題はstate側じゃなくて、value={undefined}になるからなのかな?

<input
  name="comment"
  type="text"
  value={this.state.comment || ''}
/>

Warning: Failed prop type: Invalid prop `children` of type `string` supplied to `XXXXXXX`, expected a single ReactElement.

PropTypesのルールがミスってるようなので修正

import propTypes from 'prop-types';

class User extends React.Component {
  render() {
    return(
      <p>ああああ</p>
    );
  }
}

User.propTypes = {
  children: propTypes.element
};

呼び出し元を確認

import User from './user';

class List extends React.Component {
  render() {
    return(
      <User>ああああ</User>
    );
  }
}

childrenがstringなので、stringに修正。

User.propTypes = {
  children: propTypes.string
};

Warning: Each child in a list should have a unique “key” prop.

リストにユニークkeyが無いってやつです

let lists = [];
for (let i = 1; i <= 12; i++) {
  lists.push(
    <li>
      {i}月
    </li>
  );
}

このlikeyを追加

let lists = [];
for (let i = 1; i <= 12; i++) {
  lists.push(
    <li key={i}>
      {i}月
    </li>
  );
}

返信を残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください