Der Titel kann nicht umgeschrieben werden, da er bereits eindeutig und klar ist
P粉253518620
P粉253518620 2023-08-15 18:38:17
0
1
410
<p>Ich verwende Flashlist in React Native und verwende den Hook <code>useCallback</code> in meiner Funktion <code>renderItem</code> In meiner Komponente habe ich einen Zustand (ein Array) namens <code>todos</code> und wenn ich <code>todos.length</code> protokolliere, erhalte ich nur den Anfangszustandswert 0. Warum passiert das und wie kann ich es beheben? </p> <pre class="brush:php;toolbar:false;">export default function MyComponent() { // Der Kürze halber wurde ein Teil des Codes weggelassen. const [todos, setTodos] = useState<string[]>([]); const renderItem = useCallback( ({ item }: ListRenderItemInfo<Todo>) => <TouchableOpacity style={{ height: 50 }} onPress={() => console.log(todos.length); // Immer 0 protokollieren. if (todos.length >= 10) return; setTodos((curr) => [item.name, ...curr]); }} > <Heading color={"black"}>{item.name}</Heading> </TouchableOpacity> ), [] ); zurückkehren ( <FlashList<Todo> data={data?.todos as Todo[]} geschätzteItemSize={50} renderItem={renderItem} keyExtractor={(_, idx) => idx.toString()} /> ); }</pre> <p>Hinweis: Ich habe versucht, sowohl <code>todos</code> als Abhängigkeiten an <code>useCallback</code> zu übergeben . </p> <p>Bei Fragen stehe ich Ihnen gerne zur Verfügung. </p>
P粉253518620
P粉253518620

Antworte allen(1)
P粉805922437
const [todos, setTodos] = useState<string[]>([]);

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

这是一个常见的问题,因为它不明显。因为这种情况经常发生,所以setState有一个回调版本。在你的代码中,你实际上是使用它来设置状态,但你还需要使用它来获取当前状态以进行最大10个的检查。

所以一个简单的解决方法是将长度检查放在useState的回调函数中。

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

在上面的代码中,如果当前长度大于或等于10,只返回当前状态,否则添加新项目。

另一个选项,当然是将todos添加到useCallback的状态中,但为什么这在FlashList中不起作用,不确定。

更好的选择是将Item提取为另一个子组件。这样做还有其他好处,比如更多的组合性、代码共享,最重要的是性能。

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage