老师点击效果不出来啊

老师点击效果不出来啊

https://img1.sycdn.imooc.com//climg/651facd80960226d12460612.jpg

import { useState } from 'react';

import Square from './square';


function Board() {

  const [squares, setSquares] = useState(Array(9).fill(null))

  const status = 'status'

  const clickHandler = (index) => {

    // 当发生点击之后,把当前点击的格子存入常量

    const currentSquare = squares[index];

    // 当前格子没有被点击则向下执行

    if (!currentSquare) {

      // 在squares中过滤查找

      const filledSquares = squares.filter(item => (item === "x" || item === "0"));

      // 如果已经有X那么下一个就是0

      const filledNumber = filledSquares.length;

      // 如果有0则下一个是x

      const nextLetter = (filledNumber % 2 === 0) ? "x" : "0";

      // 创建一个新的squares(新数组)

      const newSquares = squares.slice();

      // 将下一个X或者是0存入新数组中的index对应的一项中去

      newSquares[index] = nextLetter;

      // 最后更新数组,这样视图才能更新

      setSquares(newSquares);

    }


    // squares[index] = "x"

    // setSquares(squares)

  }

  return (

    <>

      <div>{status}</div>

      <div className="boare-row">

        <Square value={squares[0]} index={0} onClick={clickHandler} />

        <Square value={squares[1]} index={1} onClick={clickHandler} />

        <Square value={squares[2]} index={2} onClick={clickHandler} />

      </div>


      <div className="boare-row">

        <Square value={squares[3]} index={3} onClick={clickHandler} />

        <Square value={squares[4]} index={4} onClick={clickHandler} />

        <Square value={squares[5]} index={5} onClick={clickHandler} />

      </div>

      <div className="boare-row">

        <Square value={squares[6]} index={6} onClick={clickHandler} />

        <Square value={squares[7]} index={7} onClick={clickHandler} />

        <Square value={squares[8]} index={8} onClick={clickHandler} />

      </div>

    </>

  )

}

export default Board;


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
球球不一般 提问者 2023-10-06 15:34:15

老师不用回答了

  • 同学你好,当前阶段,需要尝试自己解决问题,这个能力非常重要!今天表现很棒,祝学习愉快!

    2023-10-06 15:44:08
  • 提问者 球球不一般 回复 好帮手慕久久 #2

    老师我问下react乃个知识点最难

    2023-10-06 15:46:51
  • 好帮手慕久久 回复 提问者 球球不一般 #3

    个人感觉都还好,主要是基础语法部分要记牢,还有阶段1中的js基础逻辑要练熟。“react基础语法+js基础逻辑思维”是学好react的必要条件。

    2023-10-06 17:05:20
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师