Sử dụng xung đột

Question

Tôi cảm thấy như tôi gặp vấn đề này thường xuyên.

Khi chuỗi useEffects được kích hoạt sau khi thay đổi trạng thái, tôi thấy rằng một số useEffects trong chuỗi có các phụ thuộc chồng chéo khiến cả hai đều được kích hoạt thay vì tuần tự, sau một lần đặt trạng thái.

Ví dụ: Tôi đang kích hoạt một chuỗi sử dụng Ảnh hưởng khi chapterIndexcập nhật.

let [ chapterIndex, setChapterIndex ] = useState<number | null>(0);

let [textTransitioning, setTextTransitioning] = useState<'out' | 'in' | null>(null);

useEffect(() => {
    setTextTransitioning('out')
}, [chapterIndex])

useEffect(() => {
    if (chapterIndex !== null) {
        const {
            current: chapter = null
        } = chapterRefs.current[chapterIndex];
            
        if (textTransitioning === 'in') {
            chapter?.classList.add('in');
        }
    }
}, [textTransitioning, chapterIndex])

Làm cách nào để ngăn cả hai chạy khi có chapterIndexthay đổi? Tôi chỉ muốn useEffect thứ hai chạy sau khi useEffect đầu tiên đặt thành textTransitioning. Khi xóa chapterIndexkhỏi mảng phụ thuộc, tôi gặp lỗi: 'React Hook useEffect thiếu phụ thuộc:' chapterIndex '. Bao gồm nó hoặc loại bỏ mảng phụ thuộc. '

Answer 1

useEffectcó 2 đối số. đầu tiên là hàm để gọi và thứ hai là một mảng các biến được gọi là mảng phụ thuộc. đối số thứ hai được sử dụng để kích hoạt hiệu ứng sử dụng khi một trong các biến trong mảng đang thay đổi. vì vậy nếu bạn không muốn useEffectđược gọi khi một biến cụ thể bị thay đổi, đừng chuyển nó vào mảng phụ thuộc. mã của bạn phải như vậy:

let [ chapterIndex, setChapterIndex ] = useState<number | null>(0);

let [textTransitioning, setTextTransitioning] = useState<'out' | 'in' | null>(null);

useEffect(() => {
      setTextTransitioning('out')
}, [chapterIndex])

useEffect(() => {
 if (chapterIndex !== null) {
     const {
         current: chapter = null
     } = chapterRefs.current[chapterIndex];
         
     if (textTransitioning === 'in') {
         chapter?.classList.add('in');
     }
 }
}, [textTransitioning]

Tôi nghĩ rằng điều đó không hiệu quả lắm khi làm cho cái này useEffectkích hoạt cái kia nhưng có thể tôi không nhìn thấy toàn cảnh

Answer 2

Bạn cần xóa "chapterIndex" khỏi mảng trong lần sử dụng thứ hai. Vì vậy, khi useEffect đầu tiên sẽ chạy sau đó nó sẽ cập nhật "textTransitioning" sẽ gây ra kích hoạt useEffect thứ hai.

Để có thêm điều kiện thực thi việc sử dụng https://reactjs.org/docs/hooks-effect.html