当作为参数传入时，React 组件的函数不被识别为函数

Question

我正在尝试将函数作为参数传递给组件，但它看不到我作为函数传递的函数。

这是页面（我只提供重要的内容）

const Home = () => {
const nav = useNavigate()

const [userList, setUserList] = useState([]);
const [loggedInUser, setLoggedInUser] = useState({});
const [currentChat, setCurrentChat] = useState(undefined);
const [showMenu, setShowMenu] = useState(false);

let navMenu    


const handleChatChange = (chat) => {
    setCurrentChat(chat);
}



return (

        <div id='sidebar'>
            <div>
                <Userlist users={userList} switchChat={handleChatChange}/>
            </div>
        </div>
)

这里是报错的react组件

const Userlist = ( props, switchChat  ) => {

const switchCurrentchat = (user) => {
    switchChat(user);
}

return (
        <div>
            <div id='home-header'>
                <h1>DevsHelp</h1>
            </div>

            <div id='userlist'>

                {props.users.map((user) => {
                    return (
                        <div key={user._id} className='user' onClick={() => switchCurrentchat(user)} >
                            <h3>{user.username}</h3>
                        </div>
                    )
                })}
            </div>
        </div>
)}

每当调用 switchChat 时，都会出现 returns 错误，指出“switchChat”不是函数。

如果我执行 console.log(user) 而不是 switchChat(user)，它会记录用户，因此该函数有效，但它只是没有将其作为函数读取。

如果有人能帮助我，我将不胜感激，谢谢！

Answer 1

React 组件接收一个对象，通常称为 props。

如果将参数包裹在花括号中，则可以在组件内通过名称引用它们。像这样：

const Userlist = ({ users, switchChat }) => {

如果这样做，您需要直接在组件内部引用用户。所以没有 props.users 了。

您也可以通过 props 对象来引用它们：

const Userlist = (props) => {
  // props.users and props.switchChat are available here
}

当作为参数传入时，React 组件的函数不被识别为函数

A React component's function is not recognized as a function when passed in as a parameter

javascript

function

reactjs