onclick이벤트 안 조건문 에러문제

[김서현]

import React, { useState } from 'react';
import { Navbar, Container, Nav, NavDropdown, Button} from 'react-bootstrap';
import './App.css';
import Data from './components/Data';
import Card from './components/Card';
import Detail from './components/Datail';
import axios from 'axios';

import { Link, Route, Switch } from 'react-router-dom'

function App() {

  let [shoes, shoesSet] = useState(Data);
  let [alertdata, alertSet] = useState(true);

  return (
    <div className="App">
     
      <Navbar bg="light" expand="lg">
      <Container>
        <Navbar.Brand href="/">ShoeShop</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link as={Link} to='/'>Home</Nav.Link>
            <Nav.Link as={Link} to='/detail'>Detail</Nav.Link>
            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>

    <Switch>

      <Route exact path="/">
      <div className='Jumbotron'>
        <h2> 20% Season off </h2>
        <p> This is a simple hero unit, a simple jumbotron style component <br />
            for calling extra attention to featured content or information. </p>
        <Button variant="primary">Learn more</Button>
      </div>

      <div className='container'>
        <div className='row'>
          {
            shoes.map((a, i)=>{ // a는 데이터 하나하나, i는 정수
              return(<Card shoes={shoes[i]} i={i} key={i}/>)
              // return(<Card shoes={a} />)
            })
          }
        </div>

        <button className='btn btn-primary' onClick={()=>{
          // 로딩중이라는 UI 띄움
          {
          alertdata === true                                                                    // 여기서 계속 에러가 납니다 ㅠ 무엇이 잘못되었을까요...
          ? alert('로딩중입니다.')
          : null
          }

          // axios를 쓰면 JSON => Object로 알아서 바꿔서 가져옴.
          axios.get('https://codingapple1.github.io/shop/data2.json')
          .then((result)=>{ // 성공하면.then()
           alertSet(false); // 로딩중이라는 UI 사라지게함

           shoesSet([...shoes, ...result.data]); // 버튼 누르면 ajax요청으로 데이터를 가져오고, 그것을 shoes라는 state에 추가함.
          })
          .catch(()=>{ // 실패하면.catch()
            alertSet(false); // 로딩중이라는 UI 사라지게함

          })

        }}>더보기</button>
      </div>
      </Route>
      <Route path="/detail/:id">
        <Detail shoes={shoes}/>
      </Route>

      <Route path="/:id">   {/* /모든문자 라는 경로를 의미함*/}
          <div>아무거나적었을때 이거 보여주삼</div>
      </Route>

    </Switch>  
    {/* 이렇게 Switch로 감싸줘야 여러개 중복이 안되고 하나당 하나에만 적용되게 됨 */}

    </div>
  );
}

export default App;

[codingapple]

onClick 에 들어있는 함수 안에는 자바스크립트 맘대로 입력할 수 있어서

굳이 중괄호 열어서 사용할 필요 없습니다 

[글쓴이]

글