제목이 이미 명시적이고 명확하므로 다시 쓸 수 없습니다.

Question

저는 React Native에서 Flashlist를 사용하고 있으며 renderItem 함수에서 useCallback을 사용하고 있습니다. 내 구성 요소에는 todos라는 상태(배열)가 있으며 todos.length를 기록하면 초기 상태 값 0만 얻습니다. 왜 이런 일이 발생하며 어떻게 해결합니까?

기본 함수 내보내기 MyComponent() {
  // 간결성을 위해 일부 코드가 생략되었습니다.
  const [todos, setTodos] = useState<string[]>([]);
  const renderItem = useCallback(
    ({ 항목 }: ListRenderItemInfo<Todo>) =>
      <터치 가능한 불투명도
        스타일={{ 높이: 50 }}
        onPress={() =>
          console.log(todos.length); // 항상 0을 기록합니다.
          if (todos.length >= 10) return;
          setTodos((curr) => [item.name, ...curr]);
        }}
      >
        <제목 색상={"검정색"}>{item.name}</제목>
      </TouchableOpacity>
    ),
    []
  );

  반품 (
    <FlashList<Todo>
      data={data?.todos as Todo[]}
      추정 항목 크기={50}
      renderItem={renderItem}
      keyExtractor={(_, idx) =>
    />
  );
}

참고: todos 및 todos.length를 useCallback .

모든 질문에 답변해 드리겠습니다.

Answer 1

으아악

그리고

으아악

이것은 명확하지 않기 때문에 흔히 발생하는 문제입니다. 이런 일이 너무 자주 발생하기 때문에 setState 콜백 버전이 있습니다. 코드에서는 실제로 상태를 설정하는 데 이를 사용하지만 최대 10번의 확인을 위해 현재 상태를 가져오는 데도 이를 사용해야 합니다.

그래서 간단한 해결책은 useState의 콜백 함수에 길이 확인을 넣는 것입니다.

으아악

위 코드에서 현재 길이가 10보다 크거나 같으면 현재 상태만 반환하고, 그렇지 않으면 새 항목이 추가됩니다.

물론 또 다른 옵션은 useCallback의 상태에 할일을 추가하는 것인데 왜 이것이 FlashList에서 작동하지 않는지 잘 모르겠습니다.

더 나은 옵션은 Item를 다른 하위 구성 요소로 추출하는 것입니다. 이를 수행하면 더 많은 구성성, 코드 공유, 그리고 가장 중요한 성능과 같은 다른 이점이 있습니다.