"Không thể cập nhật trong một cuộc chuyển trạng thái hiện" lỗi trong Phản ứng

Question

Tôi đang cố gắng để làm Bước 15 này ReactJS hướng dẫn: React.js Introduction For People Who Know Just Enough jQuery To Get By

Tác giả khuyến cáo như sau:

overflowAlert: function() { 
    if (this.remainingCharacters() < 0) { 
    return (
     <div className="alert alert-warning"> 
     <strong>Oops! Too Long:</strong> 
     </div> 
    ); 
    } else { 
    return ""; 
    } 
}, 

render() { 
    ... 

    { this.overflowAlert() } 

    ... 
} 

tôi đã cố gắng làm sau (mà trông ổn với tôi):

// initialized "warnText" inside "getInitialState" 


overflowAlert: function() { 
    if (this.remainingCharacters() < 0) { 
    this.setState({ warnText: "Oops! Too Long:" }); 
    } else { 
    this.setState({ warnText: "" }); 
    } 
}, 

render() { 
    ... 

    { this.overflowAlert() } 
    <div>{this.state.warnText}</div> 

    ... 
} 

Và tôi nhận được lỗi sau đây trong giao diện điều khiển trong Chrome Dev Tools:

Không thể cập nhật trong quá trình chuyển đổi trạng thái hiện tại (chẳng hạn như trong phạm vi render hoặc hàm tạo của một thành phần khác). Phương thức render phải là một hàm thuần túy của đạo cụ và trạng thái; tác dụng phụ của hàm tạo là một mẫu chống nhưng có thể được chuyển đến componentWillMount.

Đây là JSbin demo. Tại sao giải pháp của tôi không hoạt động và lỗi này có ý nghĩa gì?

Answer 1

Giải pháp của bạn hoạt động vì nó không có ý nghĩa hợp lý. Lỗi bạn nhận được có thể hơi mơ hồ, vì vậy hãy để tôi chia nhỏ lỗi đó. Dòng đầu tiên ghi rõ:

Không thể cập nhật trong quá trình chuyển đổi trạng thái hiện tại (chẳng hạn như bên trong kết xuất hoặc hàm tạo thành phần khác).

Bất cứ khi nào trạng thái của Thành phần phản ứng được cập nhật, thành phần được hiển thị lại cho DOM. Trong trường hợp này, có lỗi vì bạn đang cố gắng gọi overflowAlert bên trong render, gọi số setState. Điều đó có nghĩa là bạn đang cố gắng cập nhật trạng thái trong kết xuất sẽ hiển thị sau đó gọi kết xuất và overflowAlert và cập nhật trạng thái và gọi lại, vv dẫn đến vòng lặp vô hạn. Lỗi này cho bạn biết rằng bạn đang cố gắng cập nhật trạng thái như là kết quả của việc cập nhật trạng thái ở vị trí đầu tiên, dẫn đến một vòng lặp. Đây là lý do tại sao điều này là không được phép.

Thay vào đó, hãy thực hiện một cách tiếp cận khác và nhớ những gì bạn đang cố gắng hoàn thành. Bạn đang cố gắng đưa ra cảnh báo cho người dùng khi họ nhập văn bản? Nếu đúng như vậy, hãy đặt overflowAlert làm trình xử lý sự kiện của dữ liệu đầu vào. Bằng cách đó, trạng thái sẽ được cập nhật khi sự kiện đầu vào xảy ra và thành phần sẽ được hiển thị lại.

Answer 2

Thay vì thực hiện bất kỳ tác vụ nào liên quan đến thành phần trong phương thức hiển thị, hãy thực hiện sau khi cập nhật thành phần Trong trường hợp này chuyển từ màn hình Splash sang màn hình khác chỉ được thực hiện sau khi gọi phương thức componentDidMount.

import React, { Component } from 'react'; 
import { 
StyleSheet, 
Text, 
View, 
Button, 
Image, 
} from 'react-native'; 


let timeoutid; 

export default class Splash extends Component { 

static navigationOptions = { 
navbarHidden: true, 
tabBarHidden: true, 
}; 

constructor(props) { 
super(props) 
this.state = { navigatenow: false }; 

} 
componentDidMount() { 
timeoutid=setTimeout(() => { 
    this.setState({ navigatenow: true }); 
}, 5000); 
} 
componentWillUnmount(){ 

clearTimeout(timeoutid); 
} 
componentDidUpdate(){ 
const { navigate,goBack } = this.props.navigation; 

if (this.state.navigatenow == true) { 

    navigate('Main'); 
} 
} 
render() { 

//instead of writing this code in render write this code in 
componenetDidUdpate method 
/* const { navigate,goBack } = this.props.navigation; 

if (this.state.navigatenow == true) { 

    navigate('Main'); 
}*/ 

return (

    <Image style={{ 
    flex: 1, width: null, 
    height: null, 
    resizeMode: 'cover' 
    }} source={require('./login.png')}> 
    </Image> 
); 

    } 
} 

Answer 3

Đảm bảo bạn đang sử dụng biểu thức đúng. Ví dụ, sử dụng:

<View onPress={this.props.navigation.navigate('Page1')} /> 

là khác nhau với

hoặc

<View onPress={() => { 
    this.props.navigation.navigate('Page1') 
}} /> 

cuối cùng trên là chức năng biểu hiện hai, là người đầu tiên không phải là.Hãy chắc chắn rằng bạn đang truyền đối tượng hàm tới biểu thức hàm () => {}