Question

我需要更改用html嵌套标记填充的数组中的指定池，例如：

示例内容：

<tr>
 <td>1</td>
 <td>2</td>
 <td>3</td>
</tr>
<tr>
 <td>1</td>
 <td>2</td>
 <td>3</td>
</tr>
<tr>
 <td>1</td>
 <td>2</td>
 <td>3</td>
</tr>

，并将其更改为动态：

    let array=[];
    for(let i=0;i<3;i++){
        let children=[];
        for(let j=0;j<3;j++){
            children.push(<td key={`${i}${j}`}>{j}</td>);
        }   
    array.push(<tr key={`${i}`}>{children}</tr>);       
    }
   ///////////////////////////////////////

我尝试用这种方式进行迭代，但是发生错误：

 for(let i in array){
     for(let j in array[i])
     array[i][j]=<td>{some other content}</td>;
 }

我需要更改指定的池，例如：

array[row][column]=<td key={`${i}${j}`}>{k}</td>   // it doesnt work

Answer 1

发生此错误的原因是，您试图在由于某种原因启用了user模式的React环境中更新/更改多维array。

您需要制作多维strict的深层副本才能解决此问题。您可以使用slice。

假设array是状态变量：

array

添加一个用于设置初始this.state = { array: [] };值的函数：

array

在安装组件时运行initArray = () => { let array = []; for(let i=0;i<3;i++){ let children=[]; for(let j=0;j<3;j++){ children.push(<td key={`${i}${j}`}>{j}</td>); } array.push(<tr key={`${i}`}>{children}</tr>); } this.setState({array}, () => console.log("DONE: ", this.state.array)); }方法：

initArray

呈现内容，并添加一个按钮以更新componentDidMount(){ this.initArray (); }内容，这基本上是您所需要的。

array

现在，updateArray方法：

render() {
    return (
        <div>

          {this.state.array}

          <button id="btn" onClick={this.updateArray}>UPDATE</button>

        </div>
    );
  }

签出Working demo

二维数组中嵌套的html标签

1 个答案: