无法将target.value传递给状态钩子返回未定义的- React.js反应

Question

单击时，我希望将名称支柱传递给状态钩子，但它返回未定义的

    const [fav, setFav ] = useState([]); 
    
         useEffect(() => {
        dispatch(fetchProfileAction(user));
        dispatch(fetchReposAction(user));
      }, [user, dispatch]);
    
            {reposList?.name !== "Error" &&
          reposList?.map(repo => (
            <>
                <div className="col-6 g-3 ">
                <div className="border rounded-pill px-3 py-2 bg-secondary  ">
                <i 
                class="far fa-star pe-2" role={ 'button'}
                name={repo?.name} role={'button'}
                onClick={e => setFav(...fav, e.target.name)}
                ></i> 
                <a
                    target="_blank"
                    href={repo?.html_url}
                    className="text-light"
                    name={repo?.name} role={'button'}
                    onClick={e => setFav(...fav, e.target.name)}
                  >
                    {repo?.name} 
                  </a>
                  <strong className="text-light ps-2">({repo?.language})</strong>
              </div>
            </div>
                  
                
            </>
          ))}

Answer 1

根据https://docs.w3cub.com/dom/element/name，名称正式只适用于以下元素：<a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>, <map>, <meta>, <object>, <param>, <select>, and <textarea>。

因此，既然您在i标记上使用了name属性，您应该尝试通过getAtrribute获取名称值，如下所示：

 <i 
   class="far fa-star pe-2" role={ 'button'}
   name={repo?.name}
   role={'button'}
   onClick={e => setFav( [...fav, e.target.getAttribute('name')] )}