m0_62452255 2022-04-23 23:08 采纳率: 85.7%
浏览 27
已结题

React 在父组件添加按钮怎么对API获得的name字段进行排序?(语言-javascript)

React 父组件添加按钮怎么对name字段进行排序


import React, { useState, useEffect } from 'react'
function Father() {
    //定义State为数组,setState是获得的数据
    const [State, setState] = useState([])//name
    const [count, setCount] = useState([])//username
    const [isName, setIsName] = useState(true)

    useEffect(() => {
        //fetch请求数据
        fetch("https://jsonplaceholder.typicode.com/users")
            .then((res) => res.json())
            .then(data => {
                console.log(data);

                let list = data.map((post) => {
                    return post.name
                    
                });

                let list2 = data.map((post) => {
                    return post.username
                });
                //打印list
                console.log(list)
                console.log(list2)

                //将list赋值给setState
                setState(list)
                setCount(list2)
             //sort排序
                // list.sort(() => {
                //     return (
                //         Math.random() - 0.5);
                //   }); document.write(list);
              
            })
            //使用 catch() 去捕获错误
            .catch(err => console.log(err));
    }, [])

    let xxx = isName ? State : count
    console.log(xxx)
   
    return (
        <div >

            

            {xxx.map(name => { return <Son value={name} key={name} /> })}

            <button onClick={() => { setIsName(!isName) }}>name更换username</button><hr />
            <button onClick={() => {}} >筛选按钮</button >
        </div>)

}
function Son(props) {
    return (
        <div >
            <p>
                子组件:{props.value}
            </p>
        </div>
    )
}

export { Father, Son }



运行结果

img

怎么添加一个效果图,分别展示name,username,email,address信息

(例图如下)

img

  • 写回答

1条回答 默认 最新

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

      • 已结题 4月26日
      • 已采纳回答 4月24日
      • 创建了问题 4月23日

      悬赏问题

      • ¥15 关于selenium网页闪退
      • ¥15 怎么用PYTHON解类似于x = y+zx + cy = x+zy + v的方程
      • ¥300 FLASH AS2.0制作一个类似手机上下滑动一样的效果
      • ¥15 为什么使用openFoam 中的icoFoam计算圆柱扰流时出现浮点数例外(核心已转储)
      • ¥15 51单片机外部中断控制数码管
      • ¥15 创建网页里面的图片显示不出来
      • ¥15 语音控制的编写?(语言-c#)
      • ¥15 matlab输入书上的代码运行错误
      • ¥15 matlab怎么做三维曲面
      • ¥50 sph光滑粒子法能否解决阶跃性的问题