Question

我在这里尝试做的是更新数组对象＆＃39; available＆＃39;使用textInput和以下是我的代码。我不知道为什么它一直在_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未定义。您只能通过available访问this.state.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-更新该索引处的item的值。

4-使用setState更新状态值。因此，在您的情况下，您将执行以下操作：

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

希望这会对您有所帮助。

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

2 个答案: