Question

我想为该状态创建一个二维数组。一旦用户单击触摸区域。它将更新此二维数组中的值。由于某种原因，我的代码出错。以下是构造函数和onPress函数

export default class App extends Component<Props> {
    constructor(Props){
      super(Props);
      this.state = {
        test: 'U',
        array: [
          ['n','n','n'],
          ['6','n','n'],
          ['n','n','n'],
        ]
      };
    }

    onPress = (row,colum) => {
      this.setState({
        array[row][colum]: this.test
      });
    }

    render() {
      return (
          <View style={styles.middleWrapper}>
            <TouchableOpacity style={[styles.child]} onPress={this.onPress(1,0)}><Text>  {this.state.array[1][0]}</Text></TouchableOpacity>
          </View>
      );
    }
}

似乎onPress方法不正确。但是我不知道什么是不对的。请帮忙。谢谢。

**

更新1：

**

获取错误：

\node_modules\react-native\scripts\App.js: Unexpected token, expected "," (38:11)

  36 |   onPress = (row, column) => () => {
  37 |     this.setState({
> 38 |       array[row][colum]: this.test
     |            ^
  39 |     })
  40 |   }
  41 |

Answer 1

//In your onPress method there is no variable called array

// First get a soft copy of that array
let  array  = [...this.state.array];

// Do required modification
array[row][colum] = this.test;

// Set modified array in state
this.setState({array:array});

Answer 2

意外的令牌语法错误来自setState调用中的对象。密钥需要包裹在另一组方括号中：

this.setState({
    [array[row][column]]: this.test 
  })

但是，这不能解决问题。

// Create a copy of the state array so that you don't mutate state.
const array = [...this.state.array];

// Update the copy with the new value.
array[row][column] = this.test;

// Replace the state array with the new copy.
this.setState({ array });

Answer 3

您需要在onPress中传递函数的引用，正在执行的操作将在组件呈现时调用onPress函数。像这样更改代码

<TouchableOpacity style={[styles.child]} onPress={() => this.onPress(1,0)}>
    <Text>{this.state.array[1][0]}</Text>
</TouchableOpacity>

Answer 4

您正在调用onPress道具上的函数，而不是提供回调。

onPress道具类似于onClick事件处理程序，您需要为其提供函数。

您可以编辑函数以通过回调返回回调，这样，当调用onPress时，发送的参数仍在回调的范围之内。

onPress = (row, column) => () => {
  const array = [...this.state.array]; 
  // I use JSON stringify to completely clone complex objects
  // const array = JSON.parse(JSON.stringify(this.state.array));
  array[row][column] = this.test;

  this.setState({ array })
}

或者根据其他用户的建议，使用

发送匿名函数

onPress={() => this.onPress(1, 0)}

附加说明：最好不对状态变量进行突变，这对于最少的组件可能不是问题，但是随着组件的复杂化，必须提高性能。< / p>

2维数组状态

更新1：

4 个答案: