FlatListがjson配列React-nativeからのデータをレンダリングしない

theabrar

ReactNativeにFlatListがあります-

FlatListに渡すオブジェクトは次のとおりです。

    const [workoutSet, setWorkoutSet] = useState([
        { setNum: 1, reps: 10, weight: 0 },
        { setNum: 2, reps: 10, weight: 0 },
    ]);

    <SetList data={workoutSet} />

SetList内で、ここに渡されたデータをレンダリングしようとしています。

export default function SetList(data) {
    return (
        <>
            <FlatList
                data={data}
                renderItem={(item) => {
                    <Text style={styles.name}> {item} </Text>;
                }}
            />
            {console.log(data.data[0].reps)}
        </>
    );
}

console.log(data.data[0].reps)期待どおりに10を返します。

ただし、renderItem内でconsole.logを実行すると、何も出力されません。リストを表示できるようにsetNum, reps and weight内部にアクセスしたいのrenderItemですが。私は何が間違っているのですか?StackOverflowを検索しましたが、これに対する答えが見つかりませんでした。ありがとう。

アブド

レンダリングの作業例のアイテムはオブジェクトであるため、テキストコンポーネントが表示されないオブジェクトがテキストとして表示されないフラットリストについて読んで、それについてさらに理解することをお勧めします-key extractors -layouts

大きなリストでは問題になる可能性があるため、ベストプラクティスのようになります(100行のパフォーマンスが非常に遅い)

実例https://snack.expo.io/LpItecGOc

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

useEffectからのデータをレンダリングしないReact

分類Dev

FlatListがjson配列データをレンダリングしていません

分類Dev

FirebaseのデータがFlatList(React Native)でレンダリングされないのはなぜですか?

分類Dev

react-nativeのボタンをクリックしてこのコンポーネントをレンダリングする方法がわからない

分類Dev

React-Native FlatListは、データが空の場合にゼロ状態をレンダリングします

分類Dev

JQgrid:JSONデータからテーブルを正しくレンダリングしない

分類Dev

Meteor:外部API呼び出しからのデータがレンダリングされない

分類Dev

FirebaseFirestoreから取得した配列データをレンダリングする

分類Dev

JsonからのThreeJSジオメトリデータがレンダリングされない

分類Dev

React-Nativeの他のデータとともにbase64として保存されたJSONから画像をレンダリングします

分類Dev

ReactJSのURLからのjsonデータからリストをレンダリングします

分類Dev

Angular-6の動的な追加と削除の列が適切なデータをレンダリングしない

分類Dev

React + D3:配列内のデータから棒グラフをレンダリングする

分類Dev

Reactのデータの配列から単一の要素をレンダリングする

分類Dev

vueコンポーネントがバックエンドから取得したデータをレンダリングしない

分類Dev

VueJSの子コンポーネントがデータをレンダリングしない

分類Dev

HamlがRailsモデルから要素をレンダリングしない

分類Dev

Reactルーターのレンダリングが小道具を取得しない

分類Dev

データテーブルの列のレンダリングから評価スターを表示することが機能していません

分類Dev

親からの小道具をレンダリングしないReactコンポーネント

分類Dev

動的<テーブル>がデータをレンダリングしない

分類Dev

PubNubEONチャートがデータをレンダリングしない

分類Dev

データベースからオブジェクトの配列をレンダリングしようとしてエラーが発生しました

分類Dev

マップを使用してAPIからのキーでJSONデータをレンダリングする

分類Dev

Reactコンポーネントの配列から来ている場合、htmlタグを文字列ではなくhtmlタグとしてレンダリングするにはどうすればよいですか?

分類Dev

JSONデータをレンダリングしない口ひげ

分類Dev

(reddit APIからの)JSONデータをreactjsでレンダリングする

分類Dev

Reactがコンポーネントの配列をレンダリングしないのはなぜですか?

分類Dev

Webソースから画像をレンダリングしないReact

Related 関連記事

  1. 1

    useEffectからのデータをレンダリングしないReact

  2. 2

    FlatListがjson配列データをレンダリングしていません

  3. 3

    FirebaseのデータがFlatList(React Native)でレンダリングされないのはなぜですか?

  4. 4

    react-nativeのボタンをクリックしてこのコンポーネントをレンダリングする方法がわからない

  5. 5

    React-Native FlatListは、データが空の場合にゼロ状態をレンダリングします

  6. 6

    JQgrid:JSONデータからテーブルを正しくレンダリングしない

  7. 7

    Meteor:外部API呼び出しからのデータがレンダリングされない

  8. 8

    FirebaseFirestoreから取得した配列データをレンダリングする

  9. 9

    JsonからのThreeJSジオメトリデータがレンダリングされない

  10. 10

    React-Nativeの他のデータとともにbase64として保存されたJSONから画像をレンダリングします

  11. 11

    ReactJSのURLからのjsonデータからリストをレンダリングします

  12. 12

    Angular-6の動的な追加と削除の列が適切なデータをレンダリングしない

  13. 13

    React + D3:配列内のデータから棒グラフをレンダリングする

  14. 14

    Reactのデータの配列から単一の要素をレンダリングする

  15. 15

    vueコンポーネントがバックエンドから取得したデータをレンダリングしない

  16. 16

    VueJSの子コンポーネントがデータをレンダリングしない

  17. 17

    HamlがRailsモデルから要素をレンダリングしない

  18. 18

    Reactルーターのレンダリングが小道具を取得しない

  19. 19

    データテーブルの列のレンダリングから評価スターを表示することが機能していません

  20. 20

    親からの小道具をレンダリングしないReactコンポーネント

  21. 21

    動的<テーブル>がデータをレンダリングしない

  22. 22

    PubNubEONチャートがデータをレンダリングしない

  23. 23

    データベースからオブジェクトの配列をレンダリングしようとしてエラーが発生しました

  24. 24

    マップを使用してAPIからのキーでJSONデータをレンダリングする

  25. 25

    Reactコンポーネントの配列から来ている場合、htmlタグを文字列ではなくhtmlタグとしてレンダリングするにはどうすればよいですか?

  26. 26

    JSONデータをレンダリングしない口ひげ

  27. 27

    (reddit APIからの)JSONデータをreactjsでレンダリングする

  28. 28

    Reactがコンポーネントの配列をレンダリングしないのはなぜですか?

  29. 29

    Webソースから画像をレンダリングしないReact

ホットタグ

アーカイブ