Question

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

未定义不是对象（评估“ 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>
        );
    }

Answer 1

这是因为React state是不可变的对象。您不能使用函数来对诸如push() append()之类的东西进行突变。

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

执行此操作的一种好方法是使用扩展运算符...并使用括号表示法创建新数组

这是可以完成的一般示例

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

在这里，新的行对象将被分配到一个新的数组，并传递到新的state

Answer 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;

Answer 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>
    );
}

我希望这可以帮助...谢谢：）

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

3 个答案: