가나다라 정렬 후 detail

[박민규]

detail을 들어가면 사진은 잘 나오는데 다른 정보들은 정렬 전 정보로 나옵니다
근데 새로고침 하면 또 잘 정렬된 상태로 나옵니다 렌더링 문제 같은데 해결법을 모르겠습니다 밑에는 코드입니다

import "./App.css";
import { Button, Container, Nav, Navbar, Row, Col } from "react-bootstrap";
import { useState } from "react";
import bg from "./img/bg.png";
import shoesData from "./data.js";
import { Routes, Route, Link, useNavigate, Outlet } from "react-router-dom";
import Detail from "./routes/Detail.js";

function App() {
  let [shoes, setShoes] = useState(shoesData);
  let navigate = useNavigate();

  return (
    <div className="App">
      <Navbar variant="dark" className="topNav">
        <Container>
          <Navbar.Brand href="#home">MyShop</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link
              onClick={() => {
                navigate("/");
              }}
            >
              Home
            </Nav.Link>
            <Nav.Link
              onClick={() => {
                navigate("/detail");
              }}
            >
              Detailed
            </Nav.Link>
            <Nav.Link
              onClick={() => {
                navigate("/about");
              }}
            >
              About
            </Nav.Link>
          </Nav>
        </Container>
      </Navbar>

      <Routes>
        <Route
          path="/"
          element={
            <div>
              <div
                className="main-bg"
                style={{ backgroundImage: "url(" + bg + ")" }}
              ></div>
              <div className="sort-div">
                <Button
                  className="sort-shoes"
                  onClick={() => {
                    const titleSort = [...shoes].sort((a, b) => {
                      const x = a.title.toLowerCase();
                      const y = b.title.toLowerCase();
                      if (x < y) return -1;
                      if (x > y) return 1;
                      return 0;
                    });
                    setShoes(titleSort);
                  }}
                >
                  가나다순 정렬
                </Button>
              </div>

              <div>
                <Container>
                  {shoes.map(function (data, i) {
                    return <ShoesRow shoes={shoes} id={data.id} index={i} />;
                  })}
                </Container>
              </div>
            </div>
          }
        />
        <Route
          path="/detail/:id"
          // state 변경후에 렌더링이 안되는 문제 발생
          element={<Detail shoes={shoes} />}
        />
        <Route path="/about" element={<About />}>
          <Route path="member" element={<div>멤버임</div>} />
          <Route path="location" element={<div>로케이션임</div>} />
        </Route>

        <Route path="/event" element={<Event />}>
          <Route path="one" element={<p>첫 주문시 양배추즙 서비스</p>} />
          <Route path="two" element={<p>생일기념 쿠폰받기</p>} />
        </Route>
      </Routes>
    </div>
  );
}

function ShoesRow(props) {
  let navigate = useNavigate();
  return (
    <Row>
      <Col>
        <img
          onClick={() => {
            navigate("/detail/" + props.id);
          }}
          src={
            "https://codingapple1.github.io/shop/shoes" +
            (props.id + 1) +
            ".jpg"
          }
          alt="사진을 가져오지 못함"
          width="80%"
        />
        <h4>{props.shoes[props.index].title}</h4>
        <p>{props.shoes[props.index].content}</p>
        <p>{props.shoes[props.index].price}</p>
      </Col>
    </Row>
  );
}

function About() {
  return (
    <div>
      <h4>회사정보 임</h4>
      <Outlet></Outlet>
    </div>
  );
}

function Event() {
  return (
    <div>
      <h4>오늘의 이벤트</h4>
      <Outlet></Outlet>
    </div>
  );
}

export default App;
--------------------------------------------------------------------------------------------------------------------------------------

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

function Detail(props) {
  let [showAlert, setShowAlert] = useState(true);
  let { id } = useParams();

  // mount, update 될때 실행됨
  useEffect(() => {
    const timeoutId = setTimeout(() => {
      setShowAlert(false);
    }, 2000);

    // 컴포넌트가 unmount 되면 clearTimeout을 호출하여 타이머를 취소
    return () => {
      clearTimeout(timeoutId);
    };
  }, []); // mount 될때만 실행되도록 빈 배열을 전달

  // setTimeout(() => {실행할 코드}, 시간);

  return (
    <div className="container">
      {showAlert && (
        <div className="alert alert-warning">2초이내 구매시 할인</div>
      )}
      <div className="row">
        <div className="col-md-6">
          <img
            src={
              "https://codingapple1.github.io/shop/shoes" +
              (parseInt(id) + 1) +
              ".jpg"
            }
            alt="사진을 가져오지 못함"
            width="100%"
          />
        </div>
        <div className="col-md-6">
          <h4 className="pt-5">{props.shoes[id].title}</h4>
          <p>{props.shoes[id].content}</p>
          <p>{props.shoes[id].price}</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
      </div>
    </div>
  );
}

export default Detail;

[codingapple]

/detail/1로 접속하면 1번째 상품이 아니라 shoes에서 id가 1인 상품 찾아서 보여줘봅시다

[박민규]

해결 했습니다 감사합니다

// find를 이용해서 shoes의 id가 현재 가져온 id와 맞는 객체를 반환 한다
  const selectedProduct = props.shoes.find((item) => item.id === parseInt(id));

  return (
    <div className="container">
      {showAlert && (
        <div className="alert alert-warning">2초이내 구매시 할인</div>
      )}
      <div className="row">
        <div className="col-md-6">
          <img
            src={
              "https://codingapple1.github.io/shop/shoes" +
              (selectedProduct.id + 1) +
              ".jpg"
            }
            alt="사진을 가져오지 못함"
            width="100%"
          />
        </div>
        <div className="col-md-6">
          {showNumberWarning && (
            <h6 style={{ color: "red" }}>경고 : 숫자만 입력해주세요</h6>
          )}
          <input type="text" onChange={handleChange}></input>
          <h4 className="pt-5">{selectedProduct.title}</h4>
          <p>{selectedProduct.content}</p>
          <p>{selectedProduct.price}</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
      </div>
    </div>

[글쓴이]

글