Javascript 如何使用setState（）修改React Native中的多维数组？

我目前正在尝试将React组件添加到多维数组的第三层。我的结构如下：

constructor(props) {
        super(props);

        /**
         * The state variables pertaining to the component.
         * @type {Object}
         */
        this.state = {
            structure : [ // Block
                [ // Slot 1
                    [ // Layer 1
                        <Text>text 1</Text>, // Text1
                    ]
                ]
            ],
        };
}

按下应用程序中的按钮时，将调用

addText（）

函数

我还通过数组直接渲染当前层上的

文本
组件数组：

{ this.state.structure[0][0] }

我觉得我是直面问题，但不知道是什么导致了问题。我希望能够向容器中添加另一个
文本，但我尝试的任何操作似乎都不起作用。
首先，您确实不应该将React组件的实例直接存储在
状态下。这样做只会自找麻烦，因为渲染、状态更新、
key
管理和数据持久性越来越难以解决

相反，将组件的模型存储在
状态
，通常以它们应该拥有的道具的形式。然后，在渲染时，将这些模型转换为React组件：

    this.state = {
        structure : [ // Block
            [ // Slot 1
                [ // Layer 1
                    "text 1", // Text1
                ]
            ]
        ],
    };

    render() {
        return this.state.structure[0][0].map(ea => <Text key={ea}>{ea}</Text>);
    }

主要收获：

不要将React组件存储在状态中！存储原始数据并在渲染时使用
请注意您正在更新的
状态
的内容-它需要是相同的状态加上一些更新，而不是某些原子操作的结果
阅读一些有关数组操作（如
concat（）
和
push（）
的实际工作原理以及它们的返回值
首先，您确实不应该将React组件的实例直接存储在
状态中。这样做只会自找麻烦，因为渲染、状态更新、
key
管理和数据持久性越来越难以解决

相反，将组件的模型存储在
状态
，通常以它们应该拥有的道具的形式。然后，在渲染时，将这些模型转换为React组件：

    this.state = {
        structure : [ // Block
            [ // Slot 1
                [ // Layer 1
                    "text 1", // Text1
                ]
            ]
        ],
    };

    render() {
        return this.state.structure[0][0].map(ea => <Text key={ea}>{ea}</Text>);
    }

主要收获：

不要将React组件存储在状态中！存储原始数据并在渲染时使用
请注意您正在更新的
状态
的内容-它需要是相同的状态加上一些更新，而不是某些原子操作的结果
阅读一些有关数组操作（如
concat（）
和
push（）
的实际工作原理以及它们的返回值
在不涉及你是否应该以你现在的方式做这件事的任何哲学的情况下，根本的问题是你在你的州用
structure[0][0]
替换
structure

{
  // this line sets the whole structure to structure[0][0]:
  structure : previousState.structure[0][0].concat(<Text>text2</Text>),
}

{
//此行将整个结构设置为结构[0][0]：
结构：previousState.structure[0][0].concat（text2），
}
在不涉及你是否应该以你现在的方式来做这件事的哲学思想的情况下，根本的问题是你在你的州用
structure[0][0]
替换
structure

{
  // this line sets the whole structure to structure[0][0]:
  structure : previousState.structure[0][0].concat(<Text>text2</Text>),
}

{
//此行将整个结构设置为结构[0][0]：
结构：previousState.structure[0][0].concat（text2），
}
我不同意这种arr结构，挂钩和对象似乎更为传统，但它可能是您的这种绑定。正如ray在下面所说，结构[0][0]正在取代状态。
如果使用addText方法，则需要将其绑定到类。如果它不使用箭头语法，它将显示为未定义为未绑定，并将导致未定义。希望能有帮助

比如说

   class App extends React.Component {


constructor(props) {
    super(props);
    this.state = {
      value: '',
    };
    this.addText = this.addText.bind(this);
  }
  addText() {
        this.setState((previousState, props) => ({
            structure : previousState.structure[0][0].concat(<Text>text2</Text>),
        }));
}
// ES6
  addTextEs6 = () => {
    this.setState((previousState, props) => ({
      structure : previousState.structure[0][0].concat(<Text>text2</Text>),
  }));
  } 
}

//ES6 
/* Also you do not need to use concat you can use the spread Op. ... See MDN Spread Op`

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“”，
};
this.addText=this.addText.bind（this）；
}
addText（）{
this.setState（（以前的状态，道具）=>({
结构：previousState.structure[0][0].concat（text2），
}));
}
//ES6
addTextEs6=（）=>{
this.setState（（以前的状态，道具）=>({
结构：previousState.structure[0][0].concat（text2），
}));
} 
}
//ES6
/*您也不需要使用concat，您可以使用spread Op。。。参见MDN扩展操作`
我不同意这种arr结构，挂钩和对象似乎更为传统，但它可能是您的这种绑定。正如ray在下面所说，结构[0][0]正在取代状态。
如果使用addText方法，则需要将其绑定到类。如果它不使用箭头语法，它将显示为未定义为未绑定，并将导致未定义。希望能有帮助

比如说

   class App extends React.Component {


constructor(props) {
    super(props);
    this.state = {
      value: '',
    };
    this.addText = this.addText.bind(this);
  }
  addText() {
        this.setState((previousState, props) => ({
            structure : previousState.structure[0][0].concat(<Text>text2</Text>),
        }));
}
// ES6
  addTextEs6 = () => {
    this.setState((previousState, props) => ({
      structure : previousState.structure[0][0].concat(<Text>text2</Text>),
  }));
  } 
}

//ES6 
/* Also you do not need to use concat you can use the spread Op. ... See MDN Spread Op`

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：“”，
};
this.addText=this.addText.bind（this）；
}
addText（）{
this.setState（（以前的状态，道具）=>({
结构：previousState.structure[0][0].concat（text2），
}));
}
//ES6
addTextEs6=（）=>{
this.setState（（以前的状态，道具）=>({
结构：previousState.structure[0][0].concat（text2），
}));
} 
}
//ES6
/*您也不需要使用concat，您可以使用spread Op。。。参见MDN扩展操作`
这仍然包括原来的问题，即
结构
被
结构[0][0]
完全取代。这仍然包括原来的问题，即
结构
被
结构[0][0]
完全取代。答案绝对精彩！它完美地解决了我的问题。我必须感谢你给我提示，在我的组件状态中存储什么类型的数据；这是我在其他一些组件上犯的错误，但在修复它们之后，我注意到性能也发生了巨大的变化。非常感谢你，@jered@Gumptastic很乐意帮忙：）回答得太好了！它完美地解决了我的问题。我必须感谢你给我提示，在我的组件状态中存储什么类型的数据；这是我在其他一些组件上犯的一个错误，但在修复它们之后，我发现