React 16関数で呼び出されたボタンで使用される3進演算子でエラーが発生しました最大更新深度を超えました

Question

私の目標はリスト項目をクリックしたときに、非表示のボタンを確認として表示したいのです。私が試したことの上にクリックし、次のように関数名のSelectItem上のボタンを表示することです：

  <Col xs={3}> 
      <ul> 
       <h2>Your orders </h2> 
       {selectedItems.map((item, i) => (
       <li key={i}> 
        {item.name} {item.cost} {item.quantity} 
        <span onClick={() => this.deleteItem(i)}>cancel</span> 
       </li> 

      ))} 
      </ul> 
      {this.selectItem() 
       ? <Button type="button" style={{ display: 'block' }}>Confrim</Button> 
       : <Button type="button" style={{ display: 'none' }}>Confrim</Button> 
      } 

      </Col> 

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. 

質問は、私は隠しボタンを表示するには、関数呼び出しを使用する方法であるが、以下のようにこれはエラーになります私はすべてのItems.Thanksを削除するときに非表示にします。 renderメソッドの内部で実行することはできません

import React from "react"; 
import { 
    Form, 
    FormGroup, 
    Row, 
    FormControl, 
    Col, 
    Button, 
    Label, 
    Modal, 
    ButtonToolbar, 
    Table 
} from "react-bootstrap"; 

const MorningDrinks = [ 
    { 
    id: "1", 
    name: "Tea", 
    cost: 15 
    }, 
    { 
    id: "2", 
    name: "Coffee", 
    cost: 15 
    }, 
    { 
    id: "3", 
    name: "Milk", 
    cost: 15 
    } 
]; 

const ChoclateDrinks = [ 
    { 
    id: "4", 
    name: "Smoothie", 
    cost: 15 
    }, 
    { 
    id: "5", 
    name: "Hot Chocolate", 
    cost: 15 
    } 
]; 

class MenuCard extends React.Component { 
    state = { 
    selectedItems: [] 
    }; 

    selectItem = item => { 
    const { counter, selectedItems } = this.state; 
    const newItem = { 
     ...item, 
     quantity: 1 
    }; 

    const el = selectedItems.filter(el => el.id === newItem.id); 

    if (selectedItems.length === 0) { 
     this.setState({ 
     selectedItems: selectedItems.concat([newItem]) 
     }); 
    } else { 
     if (el.length) { 
     const newSelectedItems = selectedItems.map(item => { 
      if (item.id === newItem.id) { 
      item.quantity++; 
      } 

      return item; 
     }); 

     this.setState({ 
      selectedItems: newSelectedItems 
     }); 
     } else { 
     this.setState({ 
      selectedItems: selectedItems.concat([newItem]) 
     }); 
     }  
    } 
    }; 

    deleteItem(i) { 
    this.setState({ 
     selectedItems: this.state.selectedItems.filter((item, index) => { 
     return index !== i; 
     }) 
    }); 
    } 


    render() { 
    const { counter, selectedItems } = this.state; 
    return (
     <div className="container"> 
     <p> 
      Welcome {this.props.name}! Pick your any Break-fast menu you want 
     </p> 
     <Row> 
      <Col xs={3}> 
      <ul> 
       <h2>Morning Drinks </h2> 

       {MorningDrinks.map((item, i) => (
       <li 
        style={{ cursor: "pointer" }} 
        key={i} 
        onClick={() => this.selectItem(item)} 
       > 

        {item.name} {item.cost} 
       </li> 
      ))} 
      </ul> 
      <ul> 
       <h2>Chocolate Drinks </h2> 
       {ChoclateDrinks.map((item, i) => (
       <li 
        style={{ cursor: "pointer" }} 
        key={i} 
        onClick={() => this.selectItem(item)} 
       > 
        {item.name} {item.cost} 
       </li> 
      ))} 
      </ul> 
      </Col> 

      <Col xs={3}> 
      <ul> 
       <h2>Your orders </h2> 
       {selectedItems.map((item, i) => (
       <li key={i}> 
        {item.name} {item.cost} {item.quantity} 
        <span onClick={() => this.deleteItem(i)}>cancel</span> 
       </li> 

      ))} 
      </ul> 
      <Button type="button" style={{display: 'none'}}>Confrim</Button> 
      </Col> 

      <Col xs={3}> 
      <ul> 
       <h3>Total</h3> 

       {selectedItems.reduce(
       (acc, item) => acc + item.cost * item.quantity, 
       0 
      )} 
      </ul> 
      </Col> 
     </Row> 
     </div> 
    ); 
    } 
} 

export default MenuCard; 

Answer 1

this.selectItem() 

設定状態、。状態から読むだけでボタンをレンダリングしてみてください。

{this.state.selectedItems.length > 0 ? ... : ...}