タイトルはすでに明示的かつ明確であるため、書き直すことはできません

Question

<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([]); const renderItem = useCallback( ({ item }: ListRenderItemInfo<Todo>) => ( <タッチ可能な不透明度 スタイル={{ 高さ: 50 }} onPress={() => { console.log(todos.length); // 常に 0 を記録します。 if (todos.length >= 10) return; setTodos((curr) => [item.name, ...curr]); }} > <Heading color={"black"}>{item.name}</Heading> </TouchableOpacity> ）、 [] ); 戻る （ <フラッシュリスト<Todo> data={data?.todos as Todo[]} 推定アイテムサイズ={50} renderItem={renderItem} keyExtractor={(_, idx) => idx.toString()} /> ); }</pre> <p>注: <code>todos</code> と <code>todos.length</code> の両方を依存関係として <code>useCallback</code> に渡してみましたが、結果は同じでした。 。 </p> <p>どんなご質問にも喜んでお答えいたします。 </p>

Answer 1

リーリー ＃＃＃そして＃＃＃ リーリー

これは明らかではないため、よくある問題です。これは頻繁に発生するため、

setState

にはコールバック バージョンがあります。コードでは、実際にはこれを使用して状態を設定していますが、最大 10 個のチェックについて現在の状態を取得するためにも使用する必要があります。 したがって、簡単な解決策は、useState のコールバック関数に長さのチェックを入れることです。

リーリー

上記のコードでは、現在の長さが 10 以上の場合、現在のステータスのみが返され、それ以外の場合は新しい項目が追加されます。

もちろん、もう 1 つのオプションは useCallback の状態に todo を追加することですが、なぜこれが

FlashList

で機能しないのかは不明です。 より良いオプションは、

Item

を別の子コンポーネントとして抽出することです。これを行うことには、構成可能性の向上、コード共有、そして最も重要なパフォーマンスの向上など、他の利点もあります。