Tidak boleh menulis semula tajuk kerana ia sudah jelas dan jelas

Question

Saya menggunakan Flashlist dalam React Native dan saya menggunakan fungsi useCallback dalam renderItem Dalam komponen saya, saya mempunyai keadaan (tatasusunan) yang dipanggil todos dan apabila saya log todos.length Mengapa ini berlaku dan bagaimana saya membetulkannya?

eksport fungsi lalai MyComponent() {
  // Beberapa kod telah ditinggalkan untuk ringkasnya.
  const [todos, setTodos] = useState<rentetan[]>([]);
  const renderItem = useCallback(
    ({ item }: ListRenderItemInfo<Todo>) =>
      <TouchableOpacity
        gaya={{ tinggi: 50 }}
        onPress={() =>
          console.log(todos.length); // Sentiasa log 0.
          jika (todos.length >= 10) kembali;
          setTodos((curr) => [nama item, ...curr]);
        }}
      >
        <Warna tajuk={"hitam"}>{item.name}</Tajuk>
      </TouchableOpacity>
    ),
    []
  );

  kembali (
    <FlashList<Todo>
      data={data?.todos as Todo[]}
      estimatedItemSize={50}
      renderItem={renderItem}
      keyExtractor={(_, idx) =>
    />
  );
}

Nota: Saya cuba menghantar kedua-dua todos dan todos.length sebagai kebergantungan kepada useCallback .

Senang menjawab sebarang soalan.

Answer 1

const [todos, setTodos] = useState<string[]>([]);

dan

const renderItem = useCallback(
  () => {
    //todo's here is a closure, it will not update
    //a dependency of [] means, just run once.
  },
  []
);

Ini adalah masalah biasa kerana ia tidak jelas. Kerana ini berlaku terlalu kerap, setState terdapat versi panggil balik. Dalam kod anda, anda sebenarnya menggunakannya untuk menetapkan keadaan, tetapi anda juga perlu menggunakannya untuk mendapatkan keadaan semasa untuk maksimum 10 semakan.

Jadi penyelesaian mudah ialah meletakkan semakan panjang dalam fungsi panggil balik useState.

setTodos((curr) => curr.length >= 10 ? curr : [item.name, ...curr]);

Dalam kod di atas, jika panjang semasa lebih besar daripada atau sama dengan 10, hanya status semasa dikembalikan, jika tidak, item baharu ditambah.

Pilihan lain, sudah tentu, adalah menambah todos untuk menggunakan keadaan Callback, tetapi mengapa ini tidak berfungsi dalam FlashList, tidak pasti.

Pilihan yang lebih baik ialah mengekstrak Item sebagai subkomponen lain. Terdapat faedah lain untuk melakukan ini, seperti lebih banyak kebolehkomposisian, perkongsian kod, dan yang paling penting, prestasi.