Tại sao thành phần phản ứng của tôi không cập nhật với các cập nhật trạng thái?

Question

Tôi có ứng dụng bản đồ mà tôi đã tạo yêu cầu một số biểu tượng bản đồ xuất hiện/biến mất sau khi nhấn nút, nhưng tôi không thể tìm cách đặt lại thành phần khi tôi chuyển vào thuộc tính thể thao mới cha mẹ thành phần:

Chánh tải phần:

<SimpleMap sports=[default value and future values go here] /> 

Simple thành phần bản đồ (giản thể):

constructor(props) { 
    (props); 
    this.state = { 
    events: [{venue: {lat: 2, lon: 1}}], 
    sports: ["baseball", "football", "paddle", "soccer", "boxing", "dart", "biking", "golf", "hockey", "inline-skating", "tennis", "volleyball", "skateboard", "kickball", "bowling", "pool", "ride", "hike", "ice-skating"] 
    }; 
}; 

componentWillReceiveProps (nextProps) { 
    this.setState({events: [{venue: {lat: 2, lon: 1}}], 
        sports: nextProps.sports}); 
    console.log(nextProps.sports); 
} 

static defaultProps = { 
    center: {lat: 36.160338, lng: -86.778780}, 
    zoom: 12, 
    sports: ["baseball", "football", "paddle", "soccer", "boxing", "dart", "biking", "golf", "hockey", "inline-skating", "tennis", "volleyball", "skateboard", "kickball", "bowling", "pool", "ride", "hike", "ice-skating"], 
}; 

makeMapEvents (insertProps) { 
    fetch("./json/meetup.json").then((response) => { 
    return response.json() 
    }).then((response) => { 
    /* eventually returns new events object based on insertProps */ 
    this.setState({events: response}); 
    } 
}; 

componentDidMount() { 
    this.makeMapEvents(this.state.sports); 
    console.log("mounted", this.state.sports); 
} 

Cuối cùng kết thúc ở đây để lập bản đồ các sự kiện từ nhà nước:

<GoogleMap> 
    {this.state.events.map((result) => { 
    return (<Marker key={counter++} lat={result.venue.lat} lng={result.venue.lon} 
       sport={this.props.sport} data={result}/>); 
    })} 
</GoogleMap> 

Answer 1

Phản ứng Các lớp ES6 không tự động gắn this theo mặc định cho phương pháp thành viên cơ sở không phản ứng. Do đó, ngữ cảnh cho this trong chức năng của bạn makeMapEvents không bị ràng buộc chính xác. Có 2 cách để sửa lỗi này:

Via ES7 tài sản initializer:

makeMapEvents = (insertProps) => { 
    fetch("./json/meetup.json").then((response) => { 
    return response.json() 
    }).then((response) => { 
    /* eventually returns new events object based on insertProps */ 
    this.setState({events: response}); 
    }) 
}; 

Via ràng buộc trong constructor:

constructor(props) { 
    (props); 
    this.state = { 
    events: [{venue: {lat: 2, lon: 1}}], 
    sports: ["baseball", "football", "paddle", "soccer", "boxing", "dart", "biking", "golf", "hockey", "inline-skating", "tennis", "volleyball", "skateboard", "kickball", "bowling", "pool", "ride", "hike", "ice-skating"] 
    }; 

    this.makeMapEvents = this.makeMapEvents.bind(this) // << important line 


} 

Answer 2

.then((response) => { 
    this.setState({events: resp}); 
} 

Bạn lấy trong tham số response sau đó cố gắng sử dụng resp mà isnt biến mà bạn muốn.

Answer 3

Nguyên nhân có thể xảy ra là hàm makeMapEvents() của bạn không cung cấp giá trị từ vựng chính xác this khi gọi this.setState() và kết quả là mã của bạn không hoạt động. Thay đổi định nghĩa makeMapEvents() chức năng để sử dụng mũi tên chức năng (() => {}) và cung cấp đúng giá trị lexically ràng buộc về điều này như:

makeMapEvents = (insertProps) => { 
    fetch("./json/meetup.json").then((response) => { 
    return response.json() 
    }).then((response) => { 
    this.setState({events: response}); 
    }); // <-- Typo here. The closing parenthesis is missing 
}; 

Cũng có một lỗi đánh máy trong mã của bạn trong đó đóng ngoặc là mất tích như thể hiện trong ý kiến ​​trên

Answer 4

Bạn đang trộn các đạo cụ và trạng thái trong thành phần. thể thao chỉ nên có trong đạo cụ, nó không nên ở trong trạng thái vì nó đang được truyền từ thành phần gốc.

constructor(props) { 
    (props); 
    this.state = { 
    events: [{venue: {lat: 2, lon: 1}}] <== removed sports here, it didn't belong 
}; 

componentWillReceiveProps (nextProps) { 
    this.setState({events: [{venue: {lat: 2, lon: 1}}], 
        sports: nextProps.sports}); 
    console.log(nextProps.sports); 
} 

static defaultProps = { 
    center: {lat: 36.160338, lng: -86.778780}, 
    zoom: 12, 
    sports: ["baseball", "football", "paddle", "soccer", "boxing", "dart", "biking", "golf", "hockey", "inline-skating", "tennis", "volleyball", "skateboard", "kickball", "bowling", "pool", "ride", "hike", "ice-skating"], 
}; 

makeMapEvents (insertProps) { 
    fetch("./json/meetup.json").then((response) => { 
    return response.json() 
    }).then((response) => { 
    /* eventually returns new events object based on insertProps */ 
    this.setState({events: response}); 
    } 
}; 

componentDidMount() { 
    this.makeMapEvents(this.props.sports); <== changed to props.sports 
    console.log("mounted", this.props.sports); <== changed to props.sports 
}