Helpex - Trao đổi & giúp đỡ Đăng nhập
2

Tôi có một const newProductsđang quay trở lại undefinednhưng cho biết nó không phải là không xác định trong bảng điều khiển dành cho nhà phát triển chrome: Hằng số Javascript xuất hiện dưới dạng không xác định và không xác định trong bảng điều khiển dành cho nhà phát triển chrome

Nó cho biết nó được xác định trong văn bản được đánh dấu màu vàng trong bảng điều khiển và không được xác định khi di chuột qua nó. Nó không nên là không xác định. Tôi đã xem qua mã và returnsbên trong maplà các giá trị trả về. Tại sao điều này lại constxuất hiện undefinedvà cũng không undefined?

searchResults.reducer.js

// @flow
import initialState from '../../config/config'
import {
  FETCH_PRODUCTS_REJECTED,
  UPDATE_SEARCH_RESULTS
} from '../search-page/searchPage.action'
import { SET_SELECTED_SHOP } from '../search-results/searchResults.action'

const searchResults = (
  initialResultsState: [] = initialState.get('searchResults'),
  action: Object): string => {
  switch (action.type) {
    case UPDATE_SEARCH_RESULTS: {
      const newProducts = action.payload.products.map(product => {
        return {
          shop: {
            id: product.shop[0].f1,
            name: product.shop[0].f2,
            coordinate: {
              latitude: product.shop[0].f4,
              longitude: product.shop[0].f3
            },
            selected: false
          },
          products: product.products
        }
      })
      return initialResultsState.set('products', newProducts)
    }
    case SET_SELECTED_SHOP: {
      const newProducts = initialResultsState.get('products').map(product => {
        if (product.shop.id === action.payload) {
          return {
            shop: {
              ...product.shop,
              selected: true
            },
            products: product.products
          }
        } else {
          return {
            shop: {
              ...product.shop,
              selected: false
            },
            products: product.products
          }
        }
      })
      return initialResultsState.set('products', newProducts)
    }
    case FETCH_PRODUCTS_REJECTED: {
      console.log('there was an issue getting products: ',
        action.payload)
      return initialResultsState
    }
    default:
      return initialResultsState
  }
}

export default searchResults
2 hữu ích 2 bình luận 4.9k xem chia sẻ
6

Tôi nghĩ rằng đó là một tác dụng phụ của những gì chuyển dịch làm với const, vì sau khi chuyển đổi, thời gian chạy JS thực sự phải theo dõi 2 biến khác nhau .

React Native sử dụng Babel để transpile ( nguồn, trỏ vào dòng trong 0.45.1 nơi nó cho phép xác định phạm vi khối ).

Bạn xác định một hằng số có cùng tên nhiều lần trong các khối khác nhau , không sao cả trong ES2015 vì các hằng số là phạm vi khối , nhưng khái niệm này không tồn tại trong ES5, vì vậy các hằng số như vậy được chuyển sang các biến có tên khác nhau .

Ví dụ: hãy xem xét đoạn mã ES2015 này:

const i = Date.now() % 2;
switch(i) {
    case 0: {
        const x = "zero";
        console.log("x", x);
    }
    case 1: {
        const x = "one";
        console.log("x", x);
    }
    default: {
        const x = "wat";
        console.log("x", x);
    }
}

Với Babel, nó được chuyển (← xem nó hoạt động) thành:

"use strict";

var i = Date.now() % 2;
switch (i) {
    case 0:
        {
            var x = "zero";
            console.log("x", x);
        }
    case 1:
        {
            var _x = "one";
            console.log("x", _x);
        }
    default:
        {
            var _x2 = "wat";
            console.log("x", _x2);
        }
}

Vì vậy, trong ví dụ này, thời gian chạy JS thực sự có 3 biến khác nhau để đại diện x.

Vì vậy, bạn có thể đang xem xét một dòng foomà trình duyệt của bạn hiển thị qua bản đồ nguồn , nhưng trên thực tế, những gì trình duyệt đang xem có thể là _foo2, vì vậy tùy thuộc vào nhiều thứ (cài đặt chuyển đổi, tạo bản đồ nguồn, phiên bản Chrome , nghỉ ngơi của mã này, nơi chính xác bạn đang ở trong các cuộc gọi stack ...), các công cụ dev Chrome có thể gặp khó khăn để theo dõi này và quyết định của foohay _foohay _foo2nó nên chọn khi bạn nhìn vào foo.

Ví dụ với ES2015 được chuyển sang ES5 và bản đồ nguồn:Hằng số Javascript xuất hiện dưới dạng không xác định và không xác định trong bảng điều khiển dành cho nhà phát triển chrome

(hành vi hơi khác, vì nó phụ thuộc vào nhiều tham số, nhưng nó cho thấy vấn đề với việc chuyển các hằng số có tên giống hệt nhau - trong một thử nghiệm khác, với các tham số chuyển vị + mã nguồn khác nhau, tôi đã quản lý để có được một cái gì đó tương tự như tình huống của bạn)


Gợi ý

( Tôi hy vọng những điều sau đây sẽ rất rõ ràng đối với OP, nhưng có thể hữu ích nếu để lại trong câu trả lời )

Với constngữ nghĩa, bạn có 2 hằng khác nhau có cùng tên , ở 2 khối khác nhau. Theo ý kiến ​​của tôi, sẽ hữu ích khi xác định một hằng số (hoặc biến bằng cách sử dụng letthay vì var) với phạm vi khối, để tránh bất ngờ với varphạm vi (phạm vi đến hàm cha gần nhất), nhưng xác định các biến hoặc hằng có cùng tên trong 2 khối lân cận đang kêu gọi nhầm lẫn (chuyển hoặc không).

Sẽ tốt hơn nếu quyết định xem 2 biểu tượng đó có đại diện cho cùng một thứ hay không (tùy thuộc vào bạn), và sau đó:

  • nếu vậy, hãy sử dụng letđể định nghĩa chúng như một biến duy nhất cho phạm vi chính.

  • nếu không, hãy giữ chúng như constnhưng với 2 tên khác nhau. Mã sẽ rõ ràng hơn và sau khi chuyển đổi, thông tin gỡ lỗi được hiển thị bởi các công cụ dành cho nhà phát triển sẽ hữu ích hơn.

6 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ javascript react-native redux react-redux , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading