찾다

 >  Q&A  >  본문

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

<p>저는 React Native에서 Flashlist를 사용하고 있으며 <code>renderItem</code> 함수에서 <code>useCallback</code>을 사용하고 있습니다. 내 구성 요소에는 <code>todos</code>라는 상태(배열)가 있으며 <code>todos.length</code>를 기록하면 초기 상태 값 0만 얻습니다. 왜 이런 일이 발생하며 어떻게 해결합니까? </p> <pre class="brush:php;toolbar:false;">기본 함수 내보내기 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) => /> ); }</pre> <p>참고: <code>todos</code> 및 <code>todos.length</code>를 <code>useCallback</code> . </p> <p>모든 질문에 답변해 드리겠습니다. </p>
P粉253518620P粉253518620465일 전409

모든 응답(1)나는 대답할 것이다

  • P粉805922437

    P粉8059224372023-08-16 15:36:35

    으아악

    그리고

    으아악

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

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

    으아악

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

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

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

    회신하다
    0
  • 취소회신하다