TypeError：AddTag 不是函数

Posted 2023-03-16

【中文标题】TypeError：AddTag 不是函数

【英文标题】：TypeError: AddTag is not a function

【发布时间】：2021-11-10 20:37:00

【问题描述】：

我正在尝试将标签用户输入添加到现有标签列表中，但我不断收到 TypeError。这是代码的简单版本。我在 App.js 文件中创建了 addTag 并在 Profil.js 中调用它

在 App.js 中

import tag from './tag.json'

const [tagList, setTagList] = useState(tag);
const addTag = (tagInput) => 
      console.log("adding..")
      const newTag =  id : Date.now(), tag: tagInput
      setTagList([...tagList,newTag])
      console.log("added..")
    

return (
          <Profile key=e.id name=e.name username=e.username email=e.email website=e.website company=e.company.name
          street=e.address.street suite=e.address.suite city=e.address.city zipcode=e.address.zipcode 
          addTag=addTag /> )

在 Profile.js 中

const Profile = (user,addTag) => 
const [tagInput, setTagInput] = useState('')
const handleChange = (e) => 
        setTagInput(e.currentTarget.value)
    

    const handleSubmit = (e) => 
        e.preventDefault()
        addTag(tagInput)
        setTagInput("")
    
return (
<div className="search">
                    <input type="text" placeholder="Add a tag" value=tagInput onClick=()=>
                        setCancelTag(!cancelTag)
                        console.log("search enabled")
                     onChange=handleChange />
                    cancelTag? null : <button className="cancel-tag" onClick=handleSubmit >&times;</button>
                </div>

【问题讨论】：

所有属性都在第一个参数中传递给您的Profile 函数。

【参考方案1】：

试试下面的。这将解构 addTag 属性，然后将 assign/spread 其余属性解构为名称为 user 的变量：

const Profile = ( addTag, ...user ) => 

请记住，所有道具都作为第一个参数传递给Profile 函数，作为一个对象，其属性与传递给Profile 的道具名称相匹配。

【讨论】：

非常感谢，错误消失了，但是提交后，标签没有出现在页面上。有什么帮助吗？谢谢

在你分享的代码中，没有tagList的渲染。更新代码以分享您如何在tagList 中呈现元素。你能创建一个类似stackblitz.com

的工作示例吗