如何从使用状态挂钩的功能性父组件传递道具？

Question

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

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

Answer 1

我试图用你附加的 codesandbox link 打开你的项目，但它完全失败了。答案很简单 - 您在花括号中导入应用程序，而默认情况下是导出的。

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 传递到您的处理函数中，该事件将由一个函数处理，捕获整个列表的点击次数 (in )

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”捕获。现在你只有一个灯光功能。希望你会发现这有用。

如何从使用状态挂钩的功能性父组件传递道具？

How can I pass props from a functional parent component that uses the state hook?

state

reactjs

react-props

react-hooks

react-functional-component