상태 후크를 사용하는 기능 부모 구성 요소에서 소품을 전달하려면 어떻게 해야 하는가?

상태 후크를 사용하는 기능 부모 구성 요소에서 소품을 전달하려면 어떻게 해야 하는가?

그래서 이 UserData 앱(연습용)을 작업하고 있다.하드코딩된 사용자 데이터를 저장하는 구성 요소가 하나 있는데, 즉 사용자 개체가 서로 다른 어레이가 있다.내 앱에서 화면 왼쪽에 사용자 목록(사용자 이름만 표시)이 있고, 목록에서 선택한 사용자에 대한 모든 세부 정보를 표시하는 오른쪽 패널이 필요하다.(스크린샷을 확인하십시오.)데이터를 기능 상위 구성 요소인 AppContainer.js로 가져오는데, 여기서 상태 후크를 사용하여 선택한 사용자 ID를 상태 = 'selectedUserId'로 저장한다.첫 번째 렌더링에 대해 null 값을 지정하여 아무나 클릭하기 전에 '사용자 선택'이라고 표시한다.my handleClick 기능에서, 클릭 등을 할 때마다 userId를 업데이트하고 싶다.내 App.js 구성 요소에서 나는 데이터를 매핑하고 패널뿐만 아니라 다른 li 요소들로 ul을 렌더링하고 싶다.그러던 중 어디선가 내가 실수를 했다. 사용자를 클릭하면 유형 오류가 나타나고 콘솔에 '핸들클릭은 기능이 아니다'라는 메시지가 뜬다.왜 그런지 아십니까?관심 있는 경우 내 샌드박스에 대한 목록: https://codesandbox.io/s/user-data-app-with-prop-types-tkphx?file=/src/AppContainer.js:0-571

UserData.js:

export const USERS_DATA = [{
id: 1,
user_name: "jwrefford0",
first_name: "Jozef",
last_name: "Wrefford",
occupation: "Editor",
catch_phrase: "repurpose next-generation schemas"
  }]

AppContainer.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
import { useState } from "react";
import { USERS_DATA } from "./UserData";

export default function AppContainer() {
  const [selectedUserId, setSelectedUserId] = useState(null);

  const handleClick = (newUserId) => {
  setSelectedUserId(newUserId)
  };

  const selectedUserObj = USERS_DATA.find(
    (element) => element.id === selectedUserId
  );

  return (
    <App selectedUserId={selectedUserId} handleClick={handleClick} 
    selectedUserObj={selectedUserObj} />  
    )
}

그리고 마지막으로 App.js :

import "./styles.css";
import { USERS_DATA } from "./UserData";

export default function App(props) {

  const selectedUserObj = props.selectedUserObj;
  const handleClick = props.handleClick;

  return (
    <div className="App">
      <div className="list">
        <ul>
          {USERS_DATA.map((user) => (
            <li onClick={() => handleClick(user.id)} key={user.id}>
              {user.user_name}
            </li>
          ))}
        </ul>
      </div>
      <div className="panel">
          <p>{selectedUserObj ? `${selectedUserObj.first_name} ${selectedUserObj.last_name} 
          - ${selectedUserObj.occupation}` : 'Select a user'}</p>
          <p>{selectedUserObj ? `${selectedUserObj.catch_phrase}` : '' }</p>
      </div>
    </div>
  );
}

화면샷_UserData_App

이 작업의 요점은 각 구성 요소의 기능을 단순화하기 위해 다른 구성 요소를 사용하는 방법과 아직 수행하지 않은 프로펠러 유형 검사를 수행하는 것이다.나는 어떻게 내 앱의 논리를 두 가지 요소로 나눌 수 있는지 이해하기 어렵다. 내가 앱을 한 가지 컴포넌트로 만들었을 때, 그것은 잘 작동했다.그것을 쪼개자마자 난장판을 만들었다.누가 이것에 대해 나에게 가르쳐 줄 수 있니?고마워!!!

나는 네가 첨부한 코드와 박스 링크로 너의 프로젝트를 열려고 했는데 완전히 무너졌어.답은 매우 간단하다. 기본적으로 내보내는 동안 앱을 곱슬 가새로 가져오는 경우.

import { App } from './App'; //get rid of curly braces

나머지 일은 잘 됐네, 벌써 문제를 해결했나?

내가 너와 공유하고 싶은 한가지는- 네가 손잡이를 통과할 때 이렇게 기능하는 거야.

<li onClick={() => handleClick(user.id)} key={user.id}>
  {user.user_name}
</li>

각 개인에 대한 특수 기능을 만들기 위해 리액션을 만든다.그래서 마지막으로 기억 속에 있는 많은 기능들을 가지고 있는데, 그것은 꽤 같지만 단지 다른 아이디를 가지고 있다.목록 항목에 ID를 저장하고 전체 목록을 클릭할 때 하나의 기능으로 처리할 이벤트를 통해 해당 ID를 처리 기능에 전달하는 것이 좋다( 참조).

function handleClick(e) {
  setActive(+e.target.dataset.id) // "+" here converts string value from data to number 
}
...
<ul onClick={handleClick}>
  {USERS_DATA.map((user) => (
    <li data-id={user.id} key={user.id}>
      {user.user_name}
    </li>
  ))}
</ul>

이것은 표적 "li"를 클릭하는 것이 그것의 상위 구성요소 "ul"에 의해 고정되기 때문에 효과가 있을 것이다.이제 조명 기능이 하나뿐입니다.이것이 도움이 되기를 바란다.

참조URL: https://stackoverflow.com/questions/68033864/how-can-i-pass-props-from-a-functional-parent-component-that-uses-the-state-hook