如何在状态React Native中设置数组特定值

Question

我的状态中有一个数组，我想设置特定于数组的值。请让我知道setState

constructor(){
  super()
  this.state = {
     data: [
       {
         name: '',
         email: '',
         phone: ''
       }
     ]
  }
}

<TextInput
   style={styles.inputTextCol}
   value={this.state.data.name}
   onChangeText={(value) => this.setState({ data[0].name: value  })}
/>

Answer 1

const data = [...this.state.data]; //we are making copy of array instead using its reference
data[0].name  = 'changedValue'; //then on our copy we make changes
this.setState({data}}; //then we set changed array back to the state.

Answer 2

constructor(){
  super()
  this.state = {
     data: [
       {
         name: '',
         email: '',
         phone: ''
       }
     ]
  }
}

const handleChange = (value) => {
  let data = [ ...this.state.data ]
  data[0].name = value
  this.setState({data})
}

<TextInput
   style={styles.inputTextCol}
   value={this.state.data.name}
   onChangeText={(value) => handleChange(value)}
/>

Answer 3

添加一个处理它的功能，复制数组，更改值和更新状态。您也不能添加value={this.state.data.name}，因为数据是数组。

handleOnChange = value => {
    const data = [...this.state.data];
    data[0].name = value;
    this.setState({data});
}

const { data } = this.state;
<TextInput
   style={styles.inputTextCol}
   value={data[0].name}
   onChangeText={handleOnChange}
/>

Answer 4

<TextInput
   style={styles.inputTextCol}
   value={this.state.data.name}
   onChangeText={(value) => this.setState({ data: [{...this.state.data[0], name: value}] })}
/>