Javascript 在React.js中将图像切换为文本onClick

我一直在寻找类似的问题，但我不明白我做错了什么

我正在尝试从一张照片切换到一个文本onClick，这样当我点击照片时，文本就会显示出来，而不是图像。但是当我点击照片时，我得到了一个错误：setToggleImage不是一个函数

我几乎可以肯定我遗漏了什么，但我看不到。这是代码，在我发疯之前，如果有任何帮助，我们将不胜感激：

import React, { useState } from 'react';
import Image from 'react-bootstrap/Image';
import profilePhoto from '../images/_MG_9807.JPG';

const contactInfo = {
    title: 'Contact: ',
    email: 'email: xxx@gmail.com',
    Github:  ' Github: ', 
    linkedin: 'linkedin: ',
};

const ImageContactDetails = () => {
    const [ toggleImage, setToggleImage ] = useState(true);

    return (
        <div>
            <div className='imageContactDetails' onClick={() => setToggleImage(!toggleImage)} > 
                { toggleImage ? <Image id='imageDetails' src={profilePhoto}   alt='professionalprofile' /> : 
                <div>   
                    <h4> {contactInfo.title} </h4>
                    <h5> {contactInfo.email} </h5>
                    <h5> {contactInfo.Github} </h5>
                    <h5> {contactInfo.linkedin} </h5>
                </div>   
                }
            </div>
            <div id='contactInfo'></div>
        </div>
    )
}
export default ImageContactDetails;

useState在数组中返回一对值，因此应该使用数组分解。应该是：

const [toggleImage, setToggleImage] = useState(true);

---

啊!！谢谢你把它修好。然而，在更改它之后，我仍然无法让代码正常工作。它不会向我显示错误，但不会在单击时更改。不过，警报确实有效。你有什么建议吗？太好了，如果你能分享的话，我很乐意研究一下你的代码@AOJ。我现在看到的是，您的changeToText不应该返回任何内容。我可能会完全抛弃它，在onClick中添加一个内联函数，比如onClick={=>setToggleImage！toggleImage}，然后根据toggleImage的值有条件地在返回中呈现。非常感谢！这确实达到了我想要达到的目的。你不知道一旦成功我有多兴奋。我已经更新了上面的所有代码。其实不多，这就是我的全部。然而，我遇到了另一个小问题。之后：在三元运算符中，我试图调用几个段落，但这不起作用，所以我创建了变量allInformation来存储我想要使用的内容，它会打印出来，但所有内容都混在一起了。有什么建议可以把它们分成几行吗？不用担心。但是，您不能像这样插入数组。React将其转换为文本节点列表，并显示在单行上。您需要添加必要的HTML标记，我很确定h4不是正确的。可能是ul+li或dl列表？嗨，Zsolt，我没有机会回来感谢您早些时候的建议。事实上，我一开始就知道我做错了什么，这是一件非常基本的事情。我没有意识到，在react中，所有的返回都必须封装在一个根DOM元素中，其中有多个元素。我以为这只是主要的一个。代码会被更新，以防它能帮助其他人。