3 lỗi React dành cho người mới bắt đầu có thể làm hỏng ứng dụng của bạn

Là nhà phát triển React, bạn chắc chắn sẽ mắc một số lỗi khi viết mã với khung. Một số trong những sai lầm này là khá phổ biến. Và do bản chất tinh tế của chúng, bạn có thể thấy khó xác định những vấn đề này để gỡ lỗi ứng dụng của mình.

Khám phá ba lỗi React phổ biến nhất mà các nhà phát triển mắc phải. Bạn có thể mắc phải những sai lầm này khi là nhà phát triển React mới bắt đầu, trình độ trung cấp hoặc nâng cao. Nhưng tìm hiểu về chúng và ý nghĩa của chúng sẽ giúp bạn tránh và giải quyết chúng.

1. Sử dụng sai loại chức năng gọi lại

Xử lý sự kiện là một phương pháp phổ biến trong React, thông qua chức năng lắng nghe sự kiện mạnh mẽ của JavaScript. Có thể bạn muốn thay đổi màu của một nút khi di chuột vào. Có thể bạn muốn gửi dữ liệu biểu mẫu đến máy chủ khi gửi. Trong cả hai trường hợp này, bạn cần chuyển hàm gọi lại cho sự kiện để thực hiện phản ứng mong muốn. Đây là nơi một số nhà phát triển React mắc lỗi.

Hãy xem xét các thành phần sau đây, ví dụ:

 export default function App() {
  function handleSubmit(e) {
    e.preventDefault()
    console.log("Form submitted!")
  }
  function print(number) {
    console.log("Print", number)
  }
  function doubler(number) {
    return () => {
      console.log("Double", number * 2)
    }
  }
  return (
    <>
      {}
    </>
  )
} 

Ở đây bạn có ba chức năng riêng biệt. Trong khi hai hàm đầu tiên không trả về gì, thì hàm thứ ba trả về một hàm khác. Bạn phải ghi nhớ điều đó vì nó sẽ là chìa khóa để hiểu những gì bạn sẽ học tiếp theo.

Bây giờ, chuyển sang JSX, hãy bắt đầu với cách đầu tiên và phổ biến nhất mà bạn truyền một hàm dưới dạng trình xử lý sự kiện:

 <form onSubmit={handleSubmit}>
  <input type="text" name="text" defaultValue="initial"/>
  <button>Submit</button>
</form> 

Ví dụ này chuyển tên của hàm cho sự kiện thông qua chỗ dựa onSubmit để React gọi handleSubmit khi bạn gửi biểu mẫu. Bên trong handleSubmit, bạn có thể truy cập đối tượng sự kiện, cho phép bạn truy cập vào các thuộc tính như sự kiện.mục tiêu.giá trị và các phương pháp như event.preventDefault().

Cách thứ hai để chuyển một hàm xử lý sự kiện là gọi nó bên trong hàm gọi lại. Về cơ bản, bạn đang chuyển onClick một hàm gọi print() cho bạn:

 {[1, 5, 7].map((number) => {
  return (
    <button key={number} onClick={() => print(number)}>
      Print {number}
    </button>
  )
})} 

Phương pháp này hữu ích trong các trường hợp bạn muốn truyền dữ liệu cục bộ cho hàm. Ví dụ trên chuyển từng số vào hàm print(). Nếu bạn đã sử dụng phương thức đầu tiên, thì bạn sẽ không thể truyền đối số vào hàm.

Phương pháp thứ ba là nơi rất nhiều nhà phát triển mắc rất nhiều lỗi. Nhớ lại rằng chức năng nhân đôi trả về một chức năng khác:

 function doubler(number) {
  return () => {
    console.log("Double", number * 2)
  }
} 

Bây giờ nếu bạn đã sử dụng nó trong JSX như vậy:

 {[1, 5, 7].map((number) => {
  return (
    <button key={number} onClick={() => doubler(number)}>
      Double {number}
    </button>
  )
})} 

Trong trường hợp này, hàm bạn trả về từ gấp đôi() là những gì được gán cho onClick. Về cơ bản, nó giống như sao chép hàm được trả về và dán nội tuyến vào onClick. Phương pháp cuối cùng này không có bất kỳ trường hợp sử dụng nào. Hầu hết, tốt hơn hết là bạn nên thêm hàm dưới dạng một biến (phương thức đầu tiên) hoặc gọi hàm bên trong hàm gọi lại (phương thức thứ hai).

Cả ba kỹ thuật đều hợp lệ vì trong mọi trường hợp, bạn đang chuyển một hàm cho sự kiện. Trong React, bạn cần đảm bảo rằng bạn chuyển một chức năng cho thuộc tính sự kiện. Nó có thể là một biến, một hàm mã hóa cứng (nội tuyến) hoặc một đối tượng/hàm trả về một hàm khác.

2. Xuất ra số 0 khi kiểm tra sai

Khi bạn kết xuất có điều kiện một phần tử trong React, bạn có thể sử dụng câu lệnh if…else hoặc kỹ thuật đoản mạch. Đoản mạch liên quan đến việc sử dụng dấu và kép (&&). Nếu điều kiện trước dấu và đánh giá là đúng, thì trình duyệt sẽ chạy mã sau dấu và. Nếu không, trình duyệt sẽ không thực thi bất kỳ mã nào.

Đoản mạch là kỹ thuật tốt hơn nhờ cú pháp ngắn gọn của nó, nhưng nó đi kèm với một tác dụng phụ mà nhiều nhà phát triển không nhận thấy. Lỗi này xảy ra do không hiểu chính xác cách JSX hoạt động với các giá trị giả.

Hãy xem xét đoạn mã sau:

 export default function App() {
  const array = [1, 2, 3, 4]
  return (
    <div>
      {array.length && (
        <div>
          <span>Array items:</span> {array.join(", ")}
        </div>
      )}
    </div>
  )
} 

Miễn là mảng có thứ gì đó bên trong nó, React sẽ in từng mục trên trang. Điều này là do mảng.length kiểm tra đang trả về một giá trị trung thực. Nhưng điều gì xảy ra nếu mảng của bạn trống? Đầu tiên, các yếu tố tiếp theo sẽ hiển thị trên trang, đó là những gì bạn mong đợi. Tuy nhiên, bạn sẽ thấy một số 0 kỳ lạ xuất hiện trên màn hình của mình.

lý do cho điều đó là mảng.length trả về số không. Giá trị 0 là sai trong JavaScript. Và vấn đề là JSX hiển thị số 0 trên màn hình. Các giá trị sai lệch khác như null, false và không xác định không được hiển thị. Điều này có thể dẫn đến trải nghiệm người dùng không tốt vì số 0 sẽ luôn xuất hiện trên trang. Đôi khi số không có thể nhỏ đến mức bạn thậm chí không nhận thấy nó.

Giải pháp là đảm bảo chỉ trả về giá trị rỗng, không xác định hoặc sai. Bạn làm điều này bằng cách kiểm tra rõ ràng số 0 trong điều kiện thay vì dựa vào giá trị giả:

 export default function App() {
  const array = [1, 2, 3, 4]
  return (
    <div>
      {array.length !== 0 && (
        <div>
          <span>Array items:</span> {array.join(", ")}
        </div>
      )}
    </div>
  )
} 

Bây giờ giá trị 0 sẽ không hiển thị trên màn hình ngay cả khi mảng trống.

3. Không cập nhật trạng thái đúng cách

Khi cập nhật trạng thái trong thành phần React, bạn cần thực hiện đúng cách để tránh bất kỳ tác dụng phụ không mong muốn nào. Những sai lầm tồi tệ nhất là những sai lầm không ném bất kỳ lỗi nào cho bạn. Chúng gây khó khăn cho việc gỡ lỗi và tìm ra vấn đề là gì. Cập nhật trạng thái kém có xu hướng có tác dụng đó.

Lỗi này bắt nguồn từ việc không hiểu cách cập nhật trạng thái khi bạn đang sử dụng trạng thái hiện có. Hãy xem xét đoạn mã sau ví dụ:

 export default function App() {
  const [array, setArray] = useState([1, 2, 3])
  function addNumberToStart() {
    array.unshift(number)
    setArray(array)
  }
  function addNumberToEnd() {
    array.unshift(number)
    setArray(array)
  }
  return (
    <>
      {array.join(", ")}
      <br />
      <button
        onClick={() => {
          addNumberToStart(0)
          addNumberToEnd(0)
          console.log(array)
        }}
      >
        Add 0 to Start/End
      </button>
    </>
  )
} 

Nếu bạn chạy đoạn mã trên, bạn sẽ nhận thấy rằng cả hai hàm đều thêm số 0 vào đầu và cuối của mảng. Nhưng nó chưa thêm các số 0 vào mảng được in trên trang. Bạn có thể tiếp tục nhấp vào nút nhưng giao diện người dùng vẫn giữ nguyên.

Điều này là do, trong cả hai chức năng, bạn đang thay đổi trạng thái của mình bằng mảng.push(). React cảnh báo rõ ràng rằng trạng thái phải là bất biến trong React, nghĩa là bạn hoàn toàn không thể thay đổi nó. React sử dụng các giá trị tham chiếu với trạng thái của nó.

Giải pháp là truy cập trạng thái hiện tại (currentArray), tạo một bản sao của trạng thái đó và cập nhật bản sao đó:

 function addNumberToStart(number) {
  setArray((currentArray) => {
    return [number, ...currentArray]
  })
}
function addNumberToStart(number) {
  setArray((currentArray) => {
    return [...currentArray, number]
  })
} 

Đây là phương pháp phù hợp để cập nhật trạng thái trong React. Bây giờ khi bạn nhấp vào nút, nó sẽ thêm số 0 vào đầu và cuối của mảng. Nhưng quan trọng nhất, các bản cập nhật sẽ phản ánh trên trang ngay lập tức.

Các khái niệm JavaScript quan trọng khác cho React

Bài viết này đề cập đến một số lỗi phổ biến cần tránh khi viết mã trong React. Cả ba lỗi được đề cập ở đây đều bắt nguồn từ việc không hiểu đúng về JavaScript. Vì React là một khung JavaScript, nên bạn cần có hiểu biết vững chắc về JavaScript để làm việc với React. Điều này có nghĩa là học các khái niệm quan trọng liên quan nhất đến quá trình phát triển React.