Giter Site home page Giter Site logo

30days_frontend's People

Contributors

davidkorea avatar

Watchers

avatar

30days_frontend's Issues

useEffect中fetch请求数据后，setState将数据保存到本地状态变量

仅适用于fetch中包含map循环的形式（tiktok），map循环里面嵌套来fetch不适用（Rick and Morty）!!!!!

fetch最后一个then返回的数据，由于已经获取到本地，可以直接执行setState，但是不能在map里面setState！！！

  1. fetch请求到数据后，map函数遍历数据后，生成字符串，再parse成json，最后setState保存数据到状态变量
  2. map函数中需要遍历每一个url进行fetch请求，将每一个url传送给一个子组件来处理，子组件内部fetch请求该url的所有数据，将数据保存在子组件的本地状态变量中，由子组件直接使用

useEffect中fetch请求数据后，setState将数据保存到状态变量

chrome-capture

  • useEffect中fetch请求得到数据后，如何通过setState将数据保存到本地状态变量中？，将所有数据拼接成一个字符串，再把字符串解析为json对象，在set到状态变量中

  • 但是不通过字符串转换，直接setState赋值状态变量会赋值失败

    1. fetch(url).then(res=>res.json()).then(data=>data.map( ... ))，循环拿到每一条数据
    2. 现将数据保存到一个字符串中，字符串最后用”反斜线“作为分隔符
    3. 清洗上面的字符串slice（返回为列表格式），需要时在添加其他字符，以用于构造出一个json对象形式的字符串
    4. 遍历上述清洗后的数组的每一个元素map，并将每一个元素json.parse()成对象，再赋值给新的数组
    5. 将上述新数组setState给状态变量即可

完整代码实例

useEffect(() => {
    var all = ''
    fetch("https://picsum.photos/v2/list?page=10&limit=80")
        .then(res=>res.json())
        .then(data=>{
            data.map(v=>{
                let id = v.id
                let src = v.download_url.split('/').slice(0,5)
                let new_src = src.join('/') + '/120/150'
                all += `{id:${id}, src:'url(${new_src})', count:${Math.floor(Math.random(300)*1000)}}\\`
            })
            let old_string_list = all.split("\\")
            let new_string_list = old_string_list.slice(0,old_string_list.length-1)
            let obj = new_string_list.map(v=>eval("(" + v + ")"))
            
            console.log(typeof(obj),obj)
            setLoadMoreList(obj)  
        })
}, []);
  1. all字符串，由于需要转义字符，代码中使用两个反斜杠
a = "{id:722, src:'url(https://picsum.photos/id/722/120/150)', count:588}\\{id:810, src:'url(https://picsum.photos/id/810/120/150)', count:654}\\"
"{id:722, src:'url(https://picsum.photos/id/722/120/150)', count:588}\{id:810, src:'url(https://picsum.photos/id/810/120/150)', count:654}\"
  1. old_string_list将字符串通过反斜线分隔开，分割后，数组最后一个空元素需要清洗掉
b = a.split('\\')
["{id:722, src:'url(https://picsum.photos/id/722/120/150)', count:588}", "{id:810, src:'url(https://picsum.photos/id/810/120/150)', count:654}", ""]
  1. new_string_list 清洗
c = b.slice(0,b.length-1)
 ["{id:722, src:'url(https://picsum.photos/id/722/120/150)', count:588}", "{id:810, src:'url(https://picsum.photos/id/810/120/150)', count:654}"]
  1. obj 遍历清洗后的数组，将数组中的每个字符串元素，转换为json对象元素
d = c.map(v=>eval("(" + v + ")"))
(2) [{…}, {…}]
  0: {id: 722, src: "url(https://picsum.photos/id/722/120/150)", count: 588}
  1: {id: 810, src: "url(https://picsum.photos/id/810/120/150)", count: 654}
  length: 2
  __proto__: Array(0)
  1. 使用上面，有json对象构成的数组，来setState

获取元素css某一属性的当前值 

$('.box1').css('margin-left', function(i, v) {
     console.log(i);
    console.log(v);
})
  • css后面第一个参数为所选属性
  • 第二个参数为一个函数，变量I，v分别返回索引和第一参数所对应的当前值
  • i 索引没有什么用
  • v 即为css属性的当前值，可用此来获取元素当位置，并决定下一步如何摆放元素

Mar-01-2020 09-08-56

源码如下

<html>

<head>
    <style>
        .frame {
            width: 400px;
            height: 400px;
            background-color: aliceblue;
        }
        
        .box1 {
            height: 100px;
            width: 100px;
            background-color: aqua;
            margin-left: 100px;
        }
        
        .btn {
            display: inline-block;
            user-select: none;
            padding: 10px;
            margin: 5px;
            box-shadow: 0 0 5px gray;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(function() {
            $('.btn').click(function() {
                $('.box1').css('margin-left', function(i, v) {
                    console.log(i);
                    console.log(v);
                })
            })
        })
    </script>
</head>

<body>
    <div class="frame">
        <div class="box1"></div>
    </div>
    <div>
        <div class="btn">click</div>
    </div>
</body>

</html>

JSON.stringify后再次解析为object对象eval("(" + json_str + ")")

sessionStorage只能保存字符串，不能报错对象，Taro.setStorage可以直接保存对象

sessionStorage.setItem(timeKey,JSON.stringify(list))
// console.log(list)
orderId: "1586354262281"
orderContent: "[{"storeName":"hello restaurant","items":[{"itemName":"steak (take out)","price":12,"count":1},{"itemName":"fired chicken","price":48,"count":0},{"itemName":"shirmp pizza","price":52,"count":0}]},{"storeName":"world drinks","items":[{"itemName":"americano","price":22,"count":1},{"itemName":"latte","price":36,"count":0},{"itemName":"milk tea","price":18,"count":0},{"itemName":"orange juice","price":25,"count":0},{"itemName":"mango shake","price":26,"count":0}]},{"storeName":"Italy restaurant","items":[{"itemName":"pasta (2p set)","price":88,"count":1},{"itemName":"lobster (4p)","price":62,"count":0},{"itemName":"roast chicken","price":49,"count":0}]}]"

可以看出list中的orderContent的值为一个字符串化的对象，需要将其再次解析为object后使用

  • 使用JSON.parse()解析报错，因为这个字符串的外层和内层用的都是双引号，JSON.parse()只支持外层单引号' '，内层双引号" "
  • eval("(" + str + ")")，将其中str换成要解析的json字符串即可，无论引号怎么使用
console.log(eval("(" + v.orderContent + ")"))
0:
  storeName: "hello restaurant"
  items: Array(3)
    0: {itemName: "steak (take out)", price: 12, count: 0}
    1: {itemName: "fired chicken", price: 48, count: 0}
    2: {itemName: "shirmp pizza", price: 52, count: 0}

1:
  storeName: "world drinks"
  items: Array(5)
    0: {itemName: "americano", price: 22, count: 0}
    1: {itemName: "latte", price: 36, count: 1}
    2: {itemName: "milk tea", price: 18, count: 3}
    3: {itemName: "orange juice", price: 25, count: 0}
    4: {itemName: "mango shake", price: 26, count: 0}

2:
  storeName: "Italy restaurant"
  items: Array(3)
    0: {itemName: "pasta (2p set)", price: 88, count: 0}
    1: {itemName: "lobster (4p)", price: 62, count: 0}
    2: {itemName: "roast chicken", price: 49, count: 0}

使用JSON.parse()转化成json对象需要注意的地方

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.