reactjs - 如何从使用状态 Hook 的功能父组件传递 Prop ？

Question

所以我正在开发这个 UserData 应用程序(用于练习)。我有一个用于存储硬编码用户数据的组件 - 一个包含不同用户对象的数组。在我的应用程序中，我希望屏幕左侧有一个用户列表(仅显示用户名)，右侧有一个面板，显示我在列表中选择的用户的所有详细信息。 (查看屏幕截图。)
我将数据导入到我的功能父组件 AppContainer.js，在那里我使用状态 Hook 将选定的用户 ID 存储在 state = 'selectedUserId' 中。我在第一次渲染时给它一个 null 值，这样它就会在我点击任何人之前说“选择一个用户”。在我的 handleClick 函数中，我想在每次点击时更新 userId。在我的 App.js 组件中，我想映射数据并使用不同的 li 元素以及面板渲染 ul。在此过程中的某个地方，我犯了一个错误——当我点击一个用户时，会抛出一个类型错误并且控制台显示“handleClick 不是一个函数”。任何想法为什么？如果您有兴趣，这里是我的沙箱列表: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>
  );
}

这是它的样子: Screenshot_UserData_App
这个任务的重点是学习如何使用不同的组件来简化每个组件的功能，以及做一个 prop 类型检查——我还没有做。我发现很难掌握如何将我的应用程序的逻辑分成两个组件 - 当我在一个组件中创建应用程序时，它运行良好。把它分开后，我弄得一团糟。有人可以启发我吗？谢谢!!!

Answer 1

我试图用你附加的代码和框链接打开你的项目，但它完全失败了。答案很简单 - 您在大括号中导入 App，而默认情况下它是导出的。

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

其余的工作正常，也许您已经解决了问题？
我要和你分享的一件额外的事情 - 当你传递这样的句柄函数时

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

你让 React 为每个人创建特殊的功能。所以最后你在内存中有很多函数，它们非常相同，但只是具有不同的 id。最好将 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”捕获。现在您只有一个灯光功能。希望你会发现这很有帮助。