使用 textInput React Native 更新 state 数组对象中的元素

Question

我在这里要做的是使用 textInput 更新数组对象 'available'，下面是我的代码。我不知道为什么它一直在 _update 函数行给我令牌错误。请帮忙。谢谢！

export class Inventory extends Component {
state = {
    available: [
        {id: 0, name: 'Xb', value:5},
        {id: 1, name: 'Ad', value:19},
        {id: 2, name: 'Sc', value:1},
        {id: 3, name: 'AV', value:3},
        {id: 4, name: 'Ba', value:8},
        {id: 5, name: 'Ch', value:2},
        {id: 6, name: 'Pr', value:9},
        {id: 7, name: 'Mi', value:10},
        {id: 8, name: 'Se', value:1},
    ],
}

    _update = (text,index) => this.setState({available[index].value: text});

render(){
 index = 0;
  return(
    <View style={styles.container}> 
      <TextInput style={styles.input}
      keyboardType = 'number-pad'
      returnKeyType = 'go' 
      autoCapitalize = 'none'
      maxLength = {3}
      value = {this.state.available[index].value}
      onChange = {(text) => _update(text,index)} />
    </View>
  );
}

Answer 1

_update = (text,index) => this.setState({available[index].value: text}); 在某些方面无效。首先，setState 获取一个对象，如果您要更新该值，该对象应该与您当前状态上的键和值相同。其次，available[index].value 不计算任何值，因为 available 未定义。您只能通过 this.state.available 访问 available。第三，available[index].value 将成为新组件状态的关键，我认为这不是您想要的。

将你的更新改成这样

_update = (text, index) => {
  const newArray = [...this.state.available];
  newArray[index].value = text;
  this.setState({ available: newArray });
}

Answer 2

切勿像使用正常 javascript 方式直接那样改变 this.state。实际上你应该记住 this.state 是不可变的。最好的方法是：

1-首先创建状态数组的副本。

2- 查找项目的索引（如果索引可用则跳过此）。

3- 更新该索引处的项目值。

4- 使用setState 更新状态值。所以在你的情况下你会做这样的事情：

 (text,index) => {
   let newArray = [...this.state.available];
     newArray[index] = {...newArray[index], value: text}
   this.setState({available: newArray});
  }

希望这对您有所帮助。

使用 textInput React Native 更新 state 数组对象中的元素

Update an element in an array object at state by using textInput React Native

textinput

react-native