Как рендерится массив в react при передаче его в value?

Question

[Muranx]

Здравствуйте!

import './style.css';
import { useState } from 'react';

function Square({value, handleClick}){

	return <button 
			className="square"
			onClick={handleClick}
		>
			{value}
		</button>
};

export function Board() {

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

	function squareHandleClick(e){
		setSquare("X");
	};

	return (
		<>
			<div className="board-row">
				<Square value={squares} handleClick={squareHandleClick}/>
				<Square />
				<Square value={squares} handleClick={squareHandleClick}/>
			</div>
		</>
	);
}

почему при клике в двух компонентах <Square /> отображается значение "X" ? Через пропсы мы передаём массив значений value={squares} а не конкретное значение из этого массива (например squares[0]) а по факту реакт берёт первый элемент этого массива и отображает его. Если проверить это с использованием обычного js то результат будет предсказуемым и ДОМ элементе отобразится текстовой представление массива (насколько помню с помощью вызова [].toString()) т.е. полного массива, а не одного его элемента.

Comments

[Александр]

Так после клика у Вас уже не массив, Вы что ожидали?

[luxurypluxury]

Вы же при setSquare("X") как раз и делаете это;

[luxurypluxury]

Вы заменяете значение Array(9).fill(null) на 'X' хуком setSquare();

[Muranx]

Александр , понял , невнимательность

Answer 1

[historydev]

Ты при клике изменяешь состояние squares, заменяешь массив на "X", все твои компоненты Square слушают состояние squares через пропсы, соответственно он везде и будет "X".

Если тебе нужно инкапсулировать состояние squares, перенеси его в компонент Square как и обработчик клика.

Comments

[Muranx]

historydev , спасибо , невнимательность