よく出るReactのエラー一覧
![thumbnail](https://noauto-nolife.com/images/react.jpg)
textarea要素には、valueプロパティを使って値を与える
普通のHTMLでは、textareaに最初から値を入れておきたい場合、子要素に直接文字を書くと良い。
しかし、Reactで同じことをやるとエラーになる。
<textarea className="form-control" name="comment" onChange={this.handleChange}>{this.state.activeItem.comment}</textarea>
そこで、valueプロパティを使う。
<textarea className="form-control" name="comment" onChange={this.handleChange} value={this.state.activeItem.comment}></textarea>
これで、
Use the `defaultValue` or `value` props instead of setting children on <textarea>.
というエラーは解決される。
リスト内の要素を識別できるよう、keyプロパティを与える
Each child in a list should have a unique "key" prop.
リストをレンダリングする時。
renderItems = () => {
return this.state.topicList.map((item) => (
<div className="border">
<div>{item.id}:{item.comment}</div>
<textarea className="form-control" name="comment" value={item.comment} onChange={this.handleChange}></textarea>
<div className="text-end">
<input type="button" className="btn btn-danger" value="削除" onClick={() => this.handleDelete(item)} />
</div>
</div>
));
};
こんなふうに、レンダリングする要素が識別できない時、エラーが出る。
keyプロパティを与えてレンダリングをする。
renderItems = () => {
return this.state.topicList.map((item) => (
<div className="border" key={item.id}>
<div>{item.id}:{item.comment}</div>
<textarea className="form-control" name="comment" value={item.comment} onChange={this.handleChange}></textarea>
<div className="text-end">
<input type="button" className="btn btn-danger" value="削除" onClick={() => this.handleDelete(item)} />
</div>
</div>
));
};
onClick属性を加えただけで、同じ処理が何度も何度も実行されてしまう(無限ループ)
onClick属性の値に与える処理は、アロー関数でラップしておく必要がある
<button onClick={() => handleClick()}>クリックしてください</button>
このアロー関数を忘れると、何度も何度も実行されてしまう。
onChange属性の場合はラップする必要はないため、混同しないように
<input type="text" onChange={handleChange} />