cách tốt nhất để xử lý các đạo cụ không xác định trong react.js là gì?

Question

Giả sử tôi có một hành động được gửi đi khi tải trang, ví dụ như trong tệp index.js.

dụ

store.dispatch(loadData()); 

trong giảm tốc của tôi, tôi khởi tạo trạng thái để cho một đối tượng. Một cái gì đó như thế này

function myReducer(state = {}, action) 

bây giờ tôi có một số thành phần thông minh đăng ký vào tiểu bang của tôi rồi chuyển xuống thành phần khác để hiển thị dữ liệu. Một lưu ý quan trọng cho kịch bản này là thực tế là việc truy xuất dữ liệu đang diễn ra không đồng bộ. Giả sử rằng khóa của đối tượng này là một số mảng. Vì vậy, các thành phần đánh dấu sẽ có một cái gì đó như thế này

{this.props.object.key.map(k => do something)} 

Bây giờ kể từ then chốt là undefined tôi không thể gọi đồ trên đó và tôi thổi lên. Cách tôi đã được đối phó với điều này, là bằng cách sử dụng một cách đơn giản nếu kiểm tra. Nếu khóa được định nghĩa thì chạy .map nếu không trả về null. Sau đó, khi dữ liệu của tôi quay trở lại từ máy chủ, kết xuất sẽ được gọi lại do thay đổi trạng thái mà thành phần này đã đăng ký. Tại thời điểm này, khóa được xác định và bản đồ có thể được gọi.

Cách tiếp cận khác, là để xác định trạng thái của bạn sẽ trông như thế nào trong bộ giảm tốc. Nói cách khác, nếu tôi biết rằng trạng thái của tôi sẽ là một đối tượng với một thuộc tính mảng trên nó, tôi có thể làm một cái gì đó như thế này.

const initialState = { 
    key:[] 
} 

function myReducer(state = initialState, action) 

Việc làm này sẽ mang lại lợi ích trong thực tế là bây giờ tôi sẽ không cần tôi nếu kiểm tra từ quan trọng là không bao giờ xác định.

Câu hỏi của tôi là; có cách tiếp cận nào tốt hơn phương pháp kia không? Hoặc có lẽ, có một cách hoàn toàn khác để đối phó với điều này?

Answer 1

Nói chung, cách tiếp cận tôi muốn thực hiện là xác định đạo cụ mặc định trên thành phần có ý nghĩa ngữ nghĩa là "trống". Ví dụ, trong bối cảnh của vấn đề bạn mô tả tôi thường sẽ cơ cấu thành phần của tôi như thế này (các kiểu class ES6):

class MyComponent extends React.Component { 
    static defaultProps = { 
     object: { 
      key: [] 
     } 
    }; 

    ... 

    method() { 
     // this.props.object.key is an empty array, but is overriden 
     // with a value later after completion of the reducer 
     // (trigerred asynchronously) 
     this.props.object.key.map(doSomething); 
    } 
} 

này là tương đối sạch sẽ, ngăn chặn mã từ ném vào thời gian chạy, và buộc bạn phải tạo các hành vi được xác định rõ ràng cho các trạng thái đầu vào rỗng, rỗng hoặc không xác định ngữ nghĩa.