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条回答 默认 最新

  • iMingzhen 2022-04-23 23:45
    关注

    以下为完整代码

     
    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)
      
        const sortName = ()=>{
          const data = [...State.sort((a,b)=>a.localeCompare(b))];
          setState(data);
        }
       
        return (
            <div >
     
                
     
                {xxx.map(name => { return <Son value={name} key={name} /> })}
     
                <button onClick={() => { setIsName(!isName) }}>name更换username</button><hr />
                <button onClick={() => {}} >筛选按钮</button >
                <button onClick={() => sortName()} >对name排序</button >
            </div>)
     
    }
    function Son(props) {
        return (
            <div >
                <p>
                    子组件:{props.value}
                </p>
            </div>
        )
    }
     
    export { Father, Son }
     
     
    

    主要是新增了sortName函数,以及字符串的排序方法localeCompare
    参考文档
    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare

    当然你的代码还有很多可以改进的地方,加油

    如有帮助请采纳回答~

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 4月26日
  • 已采纳回答 4月24日
  • 创建了问题 4月23日

悬赏问题

  • ¥15 单纯型python实现编译报错
  • ¥15 c++2013读写oracle
  • ¥15 c++ gmssl sm2验签demo
  • ¥15 关于模的完全剩余系(关键词-数学方法)
  • ¥15 有没有人懂这个博图程序怎么写,还要跟SFB连接,真的不会,求帮助
  • ¥15 PVE8.2.7无法成功使用a5000的vGPU,什么原因
  • ¥15 is not in the mmseg::model registry。报错,模型注册表找不到自定义模块。
  • ¥15 安装quartus II18.1时弹出此error,怎么解决?
  • ¥15 keil官网下载psn序列号在哪
  • ¥15 想用adb命令做一个通话软件,播放录音