如何在深度嵌套的变量上使用 setState答案

【问题标题】：How to use setState on deeply nested variable如何在深度嵌套的变量上使用 setState
【发布时间】：2020-07-11 08:41:12
【问题描述】：

我目前正在将表格保存到this.state，如您在此处看到的那样

this.setState({    
      table: 
        <div  id='link-table' className="table-panel-table" style={{ width: "100%" , height: height - 35, overflow:'auto' }}>
          {columns}
          {rows}
        </div>      
    });

然后在渲染函数中直接使用table变量在网站上显示：

render(){ return (this.state.table) }

（如果由于某种原因这是一个坏主意，请告诉我）

我目前遇到的问题是，当您单击其中一个单元格时，我想将其转换为输入字段（显然是其上方的表单元素）。我想知道如何最好地更改this.state.table，以便在我更改单元格时它会触发重新渲染。

如果我用这个就不行了

this.state.table.props.children[1][row].props.children[cell].props.children = form_element;

据我了解，我需要使用this.setState() 进行相应更改，但我很难编写代码来定位this.state.table 中的特定嵌套变量。

我去

const { table } = this.state;
let temp_table = {...table, props: {...table.props, children: [...table.props.children]}}

但后来卡住了，因为我不知道如何继续.children[1][row]

【问题讨论】：

您是否考虑过仅将数据存储在状态中，在渲染函数中计算 JSX，然后您只需要存储额外的状态来切换输入元素。有条件地渲染 JSX 比尝试更新存储在状态中的深层嵌套 JSX 容易得多（我不知道为什么人们会想要这样做），这可能是动态的。
你知道.children[1][row]的值吗？
@AaminKhan imgur.com/a/GHAszcn 这是表格的截图。如果这就是您的意思，下一个变量又是“道具”。
@DrewReese 实际上可能是一个更好的主意

标签： javascript reactjs render setstate

【解决方案1】：

您不需要将表格存储在状态中，您可以只存储行和列数据，这样您就不必处理在表格中查找元素。状态中不存储jsx元素，只存储数据生成视图。

render(){ 
  return (
    <div  id='link-table' className="table-panel-table" style={{ width: "100%" , height: height - 35, overflow:'auto' }}>
      {generateColumns(this.state.columns)}
      {generateRows(this.state.rows)}
    </div>      
)

}

你也不应该直接操纵 dom 元素来改变它们的外观。 React 的做法是根据它们的状态生成元素，并根据它们的状态呈现不同的组件。我不知道您如何生成行和列，但以下方法可能会给出一个想法：

generateRows= (rows) => {

  return rows.map(row => { 
    if(row.shouldHaveFormElement) {
        return <RowComponentWithFormElement></RowComponentWithFormElement>
    }else {
        return <NormalRowElement></NormalRowElement>
    }
}

}

【讨论】：

我想我以前也有类似的东西，但是从我看到的情况来看，每次我调整表格大小时它都会一遍又一遍地运行填充元素的函数，这就是为什么我只是将所有行放入单个变量。我不知道这是否更好。
分离你的数据和你的视图是一个很好的做法，我建议你遵循它。每当您调整表格大小时，都会调用表格的渲染方法，但我认为这不会导致性能问题，因为 react 了解元素正在更新，因此它不会在每次渲染时重新创建组件。