javascript - 如何从单独的组件在 React Native 中创建对象数组？

Question

我是 React Native 的新手，所以我知道我有很多东西要学。
我在这里创建一个自定义类组件:

import React, { Component, useState } from 'react';
import {View,Text,StyleSheet,TextInput, Button} from 'react-native';

class Square extends React.Component{
    constructor(pos,text,won,save){
        this.state = {
            pos : 0,
            text : 'EDIT',
            won : false,
            save : false,
        };
    }

    setPos = (pos) =>{
        this.setState(pos)
    }
    getPos = () => {
        return (this.pos);
    }

    setText=(text)=>{
        this.setState(text)
    }
    getText=()=>{
        return (this.text);
    }

    setWon=(won)=>{
        this.setState(won)
    }
    getWon=()=>{
        return (this.won);
    }

    setSave=(save)=>{
        this.setState(save)
    }
    getSave=()=>{
        return (this.save);
    }
};


export default Square;

然后我想在不同的组件中创建这些对象的数组，并显示来自每个对象的一条信息。

import {View, Text, StyleSheet, Button, Alert} from 'react-native';
import Square from '../components/Square';





const NewGameScreen = () => {

   let arrSquare = [];

   for (let i = 0; i < 25; i++){
       arrSquare.push({

           THIS IS WHERE I'M HAVING TROUBLE

       });
   }

   console.log(arrSquare[0].getPos)
    
    return(
        <View style = {styles.screen}>
            <View style = {styles.row}>
               <Text>{arrSquare[0].getPos}</Text>
            </View>
        </View>
    )

};

然而，从上面的代码我确定很明显我遗漏了一些东西。我本来希望使用类似 Square[i].setPos(i); 的东西但这会引发错误。控制台日志还给出了“未定义”，这让我觉得我没有声明或没有正确声明。提前致谢。

Answer 1

好吧，我要解决这个问题的方法是拥有一个简单的 json 对象数组，如下所示:

let squareArr = [{          
            id: 0,
            pos : 0,
            text : 'EDIT',
            won : false,
            save : false,
        },
        {
            id: 1,
            pos : 0,
            text : 'EDIT',
            won : false,
            save : false,
        },
        {
            id: 2,
            pos : 0,
            text : 'EDIT',
            won : false,
            save : false,
        }
]

然后您可以进行读取和编辑。
显示位置:
在您的渲染方法中，您可以执行以下操作:

<View style = {styles.screen}>
     <View style = {styles.row}>
         squareArr.map((square) => <Text>{square.pos}</Text>)
     </View>
</View>

编辑位置:
如果您想更改 JSON 中的值，则只需使用对象索引作为指示您要更改的对象的一种方式。比如想改变 pos的第二个对象然后我会这样做:

squareArr[1].pos = 3

我不太确定整个项目是为了给你最好的解决方案，但我希望这会有所帮助..
如果您有任何问题，请随时提问