>source

map 함수 외부에 useState 변수를 배치하지 않고이를 수행하는 다른 방법이 있습니까?

const slimy = [];
{
  slimy.map(function (item) {
    const [count, setCount] = useState("");
    return (
      <ListItem
        key={item.createdAt}
        style={{ display: "flex", justifyContent: "center" }}
      >
        <div>
          <p>{count}</p>
          <button onClick={() => setCount(count + 1)} />
        </div>
      </ListItem>
    );
  });
}


  • 답변 # 1

    사용자 컴포넌트를 정의 할 수 있습니다.

    {
      slimy.map(function (item) {
        return (
          <CustomItem key={item.createdAt} names={item.names} />
        );
      });
    }
    
    
    const CustomItem = (props) => {
       console.log(props.names);  // <----------------
       const [count, setCount] = useState(0);
       return (
         <ListItem style={{ display: "flex", justifyContent: "center" }}>
           <div>
             <p>{count}</p>
             <button onClick={() => setCount(count + 1)} />
           </div>
         </ListItem>
       )
    }
    
    

  • 답변 # 2

    대신 배열을 상태로 만들 수 있습니다.

    const [countArr, setCountArr] = useState(
      () => new Array(slimy.length).fill(0)
    );
    return slimy.map(function(item, i){
      <ListItem key={item.createdAt} style={{ display: 'flex', justifyContent: 'center'}}>
        <div>
          <p>{countArr[i]}</p>
          <button onClick={() => { setCountArr(
            countArr.map((count, j) => i === j ? count + 1 : count)
          ) }} />
          </div>
      </ListItem>)
    });
    
    

관련 자료

  • 이전 rust - 템플릿 화 된 const 선언을 어떻게 생성 할 수 있습니까?
  • 다음 python - 키비 - 두 개의 다른 플로트 레이아웃 결합 및 플로트 버튼 정렬