제목순 정렬 질문있습니다.

[Ryeong]

안녕하세요. 수고 많으십니다.

function App() {

  const [post, setPost] = useState(['다다', '가가', '나나']);
  const [like, setLike] = useState([0,0,0]);

  function countUp(i) {
    var indiCountArray = [...like];
    indiCountArray[i]++
    setLike(indiCountArray);
  }

  function sortPost() {
    var sortPostArray = [...post];
    sortPostArray.sort();
    setPost(sortPostArray);
  }

... <div className="sortButton">
        <button onClick={sortPost}> 제목정렬하기 </button>
      </div>

 

/////////////////////////////////

개별 카운트 업과 제목순 Post 정렬기능 구현을 했는데요.

제목순 정렬이 잘 되긴 하는데, 맨마지막 인덱스('나나')에 좋아요를 눌러 1을 만들고 

제목순정렬을 누르면 말그대로 제목만 정렬되고 여전히 좋아요 1 은 마지막 인덱스에 꽂혀있습니다.  혹시 해결방법 있을까요... ㅜㅜ

감기 조심하세요 선생님 좋은 강의 항상 감사합니다. 

 

 

 

 

[codingapple]

그것은 컴퓨터가 '나나'와 1이 서로 관련이 있다는 사실을 모르기 때문입니다 

처음 state만들 때 like와 post를 분리하지 말고

[ { name : '나나', like : 0}, { name : '가가', like : 0}] 이렇게 만들어놓아도 될듯요  

[Ryeong]

선생님 저 바본가봐요.. 이틀이나 고민했는데... 두개를 어떻게 합쳐서 선언해야할지 모르겠어요 ㅠㅠ

1. 두 개 합쳐서 어떻게 선언해야하나요 ㅜㅜ 

2. 합쳐서 선언했을 때도 post.map()~ 이런식으로 그냥 쓰면 될까요? 

===========================================================

const [post, setPost]  = useState [
    { name: '다다', like:0},
    { name: '가가', like:0},
    { name: '나나', like:0}
  ];

 

{
        post.map( (a, i)=>{
          return (
            <div className="list" key={i}>
              <h3 onClick={ ()=>{setModalNumber(i);setModal(!modal)} }> { a } </h3>
              <span onClick={ ()=>{countUp(i)} }> ? </span> { like[i] }  
              <p> 8월 19일 발행 </p>
              <hr />
            </div>
          )
        } )
      }

[codingapple]

1번 2번 다 맞습니다 잘하신듯요 근데 useState에 소괄호가없군요 

[Ryeong]

선생님 안녕하세요..  일이 있어서 오랜만에 봤는데 아직도 해결이 안돼서요 ㅜㅜ 

 

const [post, setPost]  = useState ([
    { name : '나나', like : 0}, { name : '가가', like : 0}, {name:'라라', like:0}
  ]
  );
 
  const [modal, setModal] = useState(false);
  const [modalNumber, setModalNumber] = useState(0);
  const [clientInput, setClientInput] = useState("");

  function countUp(i) {
    var indiCountArray = [...like];
    indiCountArray[i]++
    setLike(indiCountArray);
  }

  function sortPost() {
    var sortPostArray = [...post];
    sortPostArray.sort();
    setPost(sortPostArray);
  }

  return (
    <div className="App">
      <div className="black-nav">
        <div> BOARD </div>
      </div>

      <div className="sortButton">
        <button onClick={sortPost}> 제목정렬하기 </button>
      </div>

      {
        post.map( (a, i)=>{

          return (
            <div className="list" key={i}>
              <h3 onClick={ ()=>{setModalNumber(i);setModal(!modal)} }> { a } </h3>
              <span onClick={ ()=>{countUp(i)} }> ? </span> { like[i] }  
              <p> 8월 19일 발행 </p>
              <hr />
            </div>
          )
        } )
      }

 

초기엔 const [like, setLike] = useState([0,0,0]); 이렇게 구성했었는데 post랑 like랑 합쳐버리니까 setLike를 어떻게 선언해야할 지 모르겠어요 

위 코드로 실행시켜봐도 like가 선언되지 않아서 계속 에러 떠요 ㅜㅜ 

 

 

 

[codingapple]

어려우면 함수랑 반복문은 쓰지말고 코드짜보면 됩니다 

첫 버튼을 누르면

onClick={ ()=>{

  let 카피한거 = [...post]

  카피한거[0].like++

  setPost(카피한거)

}}

이러면 될듯요 

[글쓴이]

글