我正在构建facebook gif post项目，当我点击gif时，它会显示在文本区域。但是我被类型错误贴卡住了。地图不好玩

Question

'import { useState， useEffect } 来自 “react” 从 “axios” 导入公心;导入 “./components样式/GifContainerStyles.css” 导入 Gif 文本从 “./Gif 文本”导入 Gif 文本;

const GifPost = ({open, onClose}) => {
  const [gifs, setGifs] = useState([])
  const [gifId, setGifId] = useState([ ])
   
   console.log("gifs:",gifs )
  
  const fetchData = async () =>{
    const response = await axios
    .get("https://api.giphy.com/v1/gifs/trending",{
        params: {
            api_key: "Xoa3mXrWxKXw6lJscrKUTsbZsXLbGuGY"
        }
    }).catch((error) =>{
        console.log("error at fetching data", error);
      });
      setGifs(response.data)
    };           
const getGifId = (id) => {
    setGifId(id);
  }

  useEffect(() =>{
    fetchData()
     
}, [ ]);
      return (
            <>
                </div>
                   <div className='post-text'>
                   <form><textarea placeholder='Whats on your mind?'></textarea> </form> 
                     {Object.keys(gifId).length === 0 ?  null : <GifInText  gifId={gifId}/> }
                 </div>
                 <div className='gif-container'>
                        <>
                            {Object.keys(gifs).length === 0 ? (<div>loading...</div>):
                                <div className='gif-section'>
                                    {
                                        gifs.data.map((items)=>{
                                            return(
                                                <a href="#" className='image-gifs' key= 
                                                                {items.id}>
                                                    <img className="live-gifs" onClick= 
             {()=>getGifId(items.id)} src={items.images.fixed_height.url} alt="..."/>
                                                </a>
                                            )
                                        })
                                    }
                                </div>
                            }
                        </>
                        </div>
                    </>
                )
               }
               export default GifPost;`

这是子组件

'从“反应”导入{useState， useEffects}；从“axios”const GifInText=（{gifId}）=导入axios

    const [post, setPost] = useState([])
    console.log("post:",post );

    const fetchData = async () =>{
           axios.get(`https://api.giphy.com/v1/gifs/${gifId}`,{
                params: { 
                    api_key: "Xoa3mXrWxKXw6lJscrKUTsbZsXLbGuGY",
                    gif_id: gifId
                }
            }).catch((error) =>{console.log("error at fetching gifID2", error);
                }).then(response => {setPost(response.data) });}

        useEffect(()=>{
          fetchData()
        }, [fetchData])
        
        return (
            <div>         
                {
                    post.data && post.data.map((items)=>{
                        return(
                            <a href="#" className='image-gifs' key={items.id}>
                                <img className="live-gifs" src={items.data.images} alt="..."/>
                            </a>
                        )
                    })
                }           
            </div> 
         )
}
export default GifInText;`
 

Answer 1

看起来您正在尝试在对象上使用map函数。您只能直接在数组上使用map函数。在您的控制台日志中，post是一个包含更多对象的对象，例如data和meta。

因此，您需要进行以下更改：

首先，更改< code >状态

const [post, setPost] = useState({});

最后，在对象上使用＜code＞映射

Object.values(post.data).length && Object.values(post.data).map((item)=>{
    //use item here
})