如何在数组中的索引中添加元素？ ReactJs

Question

我正在玩Tic Tac Toe游戏，但我有一个问题..

我想在传递的位置添加数组中的元素。

我的app.js：

import React, { Component } from 'react';
import './App.css';
import Square from './Square.js';
import './Square.css';

class App extends Component {
  constructor() {
    super();

    this.state = {
      board: Array(9).fill(''),
      currentUser: 'X',
      position: Array(9).fill(''),
    }
  }

  changeUser = () => {
    this.setState({
      currentUser: this.state.currentUser === 'X' ? "O" : "X",
    })
  }

  render() {
    return (
      <div id="game">
        <div id='head'>
          <h5> Tic Tac Toe Jcsouz Games </h5>

        </div>
        <div id="board">
          {this.state.board.map((v, i) => <Square position={this.state.position} value={i} key={i} changeUser={this.changeUser} currentUser={this.state.currentUser}>
            {props => (<span>{props}</span>)}
          </Square>
          )}
        </div>
      </div>
    );
  }
}

export default App;

Square.js（我做push）;

import React from 'react';
import './Square.css';

class Square extends React.Component {
  constructor() {
    super();

    this.state = {
      player: '',
    }
  }

  changePlayer = () => {
    const { changeUser, value, position, currentUser } = this.props;

    position.push(currentUser);

    changeUser();
    
    if (this.state.player === '') {
      this.setState({
        player: this.props.currentUser,
      })
    }
  }

  render() {
    return (
      <div className="square" onClick={this.changePlayer}>
        {this.props.children(this.state.player)}
        {this.props.children(this.state.position)}
      </div>
    )
  }
}

export default Square;

需要发生什么：每个方格都有它的索引（从0到8），我想要它，例如：如果我点击方形数字0，它会在数组中添加它的值0 ['' X'，''，''，''，''，''，''，''，'''，或者，如果我点击方块4，位置4 [''，''，''，'X ”， ''， ''， ''， ''， '']。

我尝试过，但是错了：

有人可以帮助我吗？请..

Answer 1

您需要使用拼接功能，将项目放入特定位置

所以你应该像

那样做

position.splice(thePosition, 0, valueToBeInserted);

您可以在https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/splice

中阅读其文档

Answer 2

您正在使用：

position.push(currentUser);

这会将元素'currentUser'添加到数组中。那不是你想要的！

你应该这样做：

position[i] = currentUser;

Answer 3

您可以更改

position.push(currentUser);

到

position.splice(value, 1, currentUser);

下一步：将处理程序传递给Square，更新App中的状态，而不是改变Square中的状态。

Answer 4

position.push()方法只会添加到数组中。要影响您需要的阵列的某个位置：

this.state = {
 board: Array(9).fill('') 
}

this.state.board[1] = 'X'

最后一行代码将用'X'字符替换board变量第一个位置的当前值，为您提供：

["", "X", "", "", "", "", "", "", ""]

希望它有所帮助。

更新

我的理解是slice()方法会将一个元素插入到数组的中间。结果，它会增长。我认为这不是你的目标

更新

您应该始终使用setState()函数来更新组件的状态