Lỗi “history of undefined” trong react
- Khi bạn sử dụng React-router-dom cho react Router trong ứng dụng của mình, bạn thường phải đối mặt với lỗi history of undefined .
- Giải pháp cho lỗi này là sử dụng withRouter như một wrapper (method HOC) bọc bao quanh component.
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
class App extends Component {
...
render() {
}
export default connect(
(state) => ({ ... }),
(dispatch) => ({ ... })
)withRouter(App));
}
Lỗi “Expected an assignment or function call and instead saw an expression”.
Lỗi này xảy ra khi bạn bọc phần thân function bằng bằng dấu ngoặc nhọn ({}) nhưng không trả về bất kỳ giá trị nào. Ví dụ:
const def = (props) => { <div></div> };
Cú pháp trên sẽ không trả về bất kỳ giá trị nào.
Hướng giải quyết như sau:
// solution
// Instead of const def = (props) => { <div></div> };
// Change to
const def = (props) => { return (<div></div>); };
// OR
const def = (props) => <div></div>;
Lỗi “Error: Invariant failed: You should not use <Switch> outside a <Router>”.
Chắc chắn các bạn đã gặp phải lỗi này ít nhất một lần trong đời khi sử dụng React (đặc biệt là React-router-dom).
Switch tương tự như câu lệnh switch trong JavaScript, được sử dụng để thực hiện các hành động khác nhau dựa trên các điều kiện khác nhau:
switch (5) {
case 0 :
// do something
case 1 :
// do something
...
}
- Hướng giải quyết:
import { Switch, Route } from 'react-router-dom';
<Switch>
<Route path = '/path1' component={ component1 } />
<Route path = '/path2' component={ component2 } />
<Route path = '/path3' component={ component3 } />
...
</Switch>
Lỗi “Parsing error: Lexical declaration cannot appear in a single-statement context”.
Lỗi này xảy ra khi bạn sử dụng let (let alone) một mình cô độc trong 1 phạm vi nhất định (trong Chrome) React :
Ví dụ:
function TestError() {
if (true) {
let k2 = new Object("ss");
}
}
// phương thức sau khi được tối giản sẽ là:
function TestError()
{
if (1)
let k2 = new Object("ss")
}
Đoạn code trên khi chạy Chrome sẽ xảy ra lỗi.
- Hướng giải quyết: Không sử dụng let alone.
function TestError()
{
if (1) {
let k2 = new Object("ss")
}
}
// Hoặc
function TestError()
{
if (1)
Object("ss")
}
Lỗi Higher-order component (HOC) React
Khi bạn cố gắng chuyển một mảng array từ component cha sang component con, bạn thường sử dụng map để gửi một loạt các array của props lặp đi lặp lại (vì React không cho phép props nằm trong một mảng array).
Có một lỗi phổ biến mà nhiều nhà phát triển React mắc phải trong khi chuyển một loạt các array chứa props sang component con. Nhưng, nếu bạn biết được sự khác biệt giữa hai đoạn code dưới đây, thì bạn đã hiểu được vấn đề và sẽ không có vấn đề gì nữa
render() {
{
organizationData.map(schoolData => {
<MSCList
schoolID = {schoolData.schoolID}
schoolName = {schoolData.schoolName}
alignment = {schoolData.alignment}
classList = {schoolData.class}
/>
})
}
}
vs.
render() {
{
organizationData.map(schoolData => (
<MSCList
schoolID = {schoolData.schoolID}
schoolName = {schoolData.schoolName}
alignment = {schoolData.alignment}
classList = {schoolData.class}
/>
))
}
}
Bạn có nhận thấy sự khác biệt ở 2 đoạn code trên? Đó là
.map (schoolData => {
ngoặc nhọn được thay thế
.map (schoolData => (
bằng dấu ngoặc đơn.
Sử dụng ngoặc nhọn sẽ gây ra ERROR.
Kết luận
Qua bài viết, bạn đã biết các lỗi thường gặp và cách giải quyết. Hãy luôn cẩn thận code theo hướng giải quyết để tránh xảy ra các lỗi không cần thiết.
Tham khảo thêm về React : 11 React Hooks hữu ích không thể bỏ qua
Bài viết này được sưu tầm và tổng hợp từ nhiều nguồn trên Internet.
Nếu có gì không hiểu thì inbox messenger bên dưới mình hỗ trợ thêm nhé.
