如何在按下按钮时呈现新行答案

【问题标题】：How to render new row onpress of button如何在按下按钮时呈现新行
【发布时间】：2019-12-05 08:59:18
【问题描述】：

我想添加功能，例如：“添加新记录”。我希望每当用户单击“添加新”按钮时，应该在下面生成新行。之后我还想要每一行的数据。我附加的代码不起作用，我还附加了错误。请为我提供解决方案或其他技巧。谢谢。

undefined 不是对象（评估 'this.state.row.push'）

constructor(){
       super()
       this.state = {
          rows: []
       }
    }
    index = 0;
    _addRow(){
      this.state.rows.push(this.index++)
      this.setState({ rows: this.state.rows })
    }
    render(){
       let rows = this.state.rows.map((r, i) => {
        return <View key={ i } style={[styles.row, CheckIndex(i)]}>
                  <Text >Row { r }, Index { i }</Text>
               </View>
       })
        return (
          <View style={styles.container}>
            <TouchableHighlight onPress={ this._addRow } style={styles.button}>
                <Text>Add new row</Text>
                    </TouchableHighlight>
            { rows }
          </View>
        );
    }

【问题讨论】：

肯定会接受。我只是评论你的答案，请检查

标签： reactjs react-native

【解决方案1】：

这是因为React state 是一个不可变对象。您不能使用函数来改变 push() append() 等内容。

相反，您应该创建一个新实例，并将其分配给您的状态。

一个很好的方法是使用扩展运算符... 并使用括号表示法创建一个新数组

这是一个可以做到的一般示例

addRow = () =>{
const row ={//the data of the new rowobject}
this.setState({rows: [row, ...this.state.rows]})
}

这里新的行对象，将被分配给一个新的数组，并传入新的state

【讨论】：

> undefined 不是一个对象（评估 'this.state.rows'）

【解决方案2】：

@baileyhaldwin 所说的改变状态是完全正确的。

我会像这样修改你的 _addRow 函数

Checkout the demo

class App extends Component {
  constructor() {
    super()
    this.state = {
      rows: []
    }
 }

_addRow = () => {
  let { rows } = this.state
  let index = rows.length
  rows.push(index++)
  this.setState(rows)
}

render() {
  const rows = this.state.rows.map((r, i) => {
    return (
      <View key={ i }>
        <Text >Row { r }, Index { i }</Text>
      </View>
    )
 })

   return (
     <View>
       <TouchableHighlight onPress={this._addRow}>
         <Text>Add new row</Text>
       </TouchableHighlight>
      {rows}
     </View>
   );
 }
 }


export default App;

【讨论】：

> undefined 不是一个对象（评估 'this.state.rows'）
你查看我提供的链接了吗？

【解决方案3】：

您可以尝试以下代码，只需创建一个临时变量并将状态值分配给该变量，然后将新值推送到该变量，然后使用该新变量设置状态。

constructor(){
    super()
    this.state = {
        rows: []
    }
}
index = 0;
_addRow(){
    let temp = [...this.state.rows]
    temp.push(this.index++)
    this.state.rows.push()
    this.setState({ rows: temp })
}
render(){
    let rows = this.state.rows.map((r, i) => {
        return <View key={i} style={[styles.row, CheckIndex(i)]}>
            <Text >Row {r}, Index {i}</Text>
        </View>
    })
    return (
        <View style={styles.container}>
            <TouchableHighlight onPress={this._addRow} style={styles.button}>
                <Text>Add new row</Text>
            </TouchableHighlight>
            {rows}
        </View>
    );
}

我希望这会有所帮助...谢谢 :)

【讨论】：