前提・実現したいこと
Reactで変更したstateが画面上ですぐに反映されずに困っています。Itemの数量を子コンポーネントのクリックに応じて増やすという仕様で、console.log
で見てみると、問題なく増えているのですが、画面でrenderしている箇所には反映されていません。
試してみたこと
上記の記事を参考に、変数を加えてみたのですが現状は変わっていません。
また、setStateで書き換えて見ましたがこちらもうまくいきませんでした。
該当のソースコード
◾️Select.js
import React, { Component } from 'react'; import ItemList from './common/ItemList'; class Select extends Component { constructor(props) { super(props); this.state = { items: [ { id: 1, name: 'apple', chosen: false, quantity: 0 }, { id: 2, name: 'banana', chosen: false, quantity: 0 } ] }; } _handleAdd = id => event => { this.setState((prevState, props) => ({ items: prevState.items.map(prevItem => { if(prevItem.id !== id) return prevItem; const quantity = prevItem.quantity + 1; return { quantity, ...prevItem }; }) })); console.log('state: ', this.state); } render() { return ( <div className="App"> <h1>SelectItem</h1> <ItemList items={this.state.items} handleAdd={this._handleAdd} /> </div> ); } } export default Select;
◾️SelectList.js
JavaScript
1import React from 'react'; 2import SelectedItem from './common/SelectedItem'; 3 4const SelectedItemList = ({ items, handleAdd }) => ( 5 items.map(item => ( 6 <SelectedItem 7 key={item.id} 8 item={item} 9 handleAdd={handleAdd} 10 /> 11 )) 12); 13 14export default SelectedItemList
◾️SelectedItem.js
JavaScript
1import React from 'react'; 2 3const SelectedItem = ({ item, handleAdd }) => ( 4 <button onClick={handleAdd(item.id) /> 5 <p>{item.quantity}個購入します</p> 6); 7 8export default SelectedItem
回答1件
あなたの回答
tips
プレビュー