i need an opinion on how to solve this. i have the following code:
const {map, items} = props;
const [infoWindow, setInfoWindow] = useState(null);
const [renderedItems, setRenderedItems] = useState([]);
useEffect(() => {
const open = (marker, content) => {
infoWindow.close();
infoWindow.setContent(content)
infoWindow.open(map, marker);
}
if(map && items){
renderedItems.forEach(e => e.setMap(null));
const newRender = [];
items.forEach(e => {
const newMarker = new window.google.maps.Marker({
position: e.location
});
if(e.content){
newMarker.addListener("click", () => open(newMarker, e.content));
}
newRender.push(newMarker);
newMarker.setMap(map);
});
setRenderedItems(newRender);
}
}, [map, items, infoWindow]);
i keep having the react warning that renderedItems should be in the dependency. if i do that, this renders without end, but i cant take this out of here. cause i need to save the reference of this new created markers
it's normal that the warning pops up, it will check for every variable/function inside your useEffect, if u r certain that u don't need to trigger it when renderedItems change u can disable it:
useEffect(() => {
const open = (marker, content) => {
infoWindow.close();
infoWindow.setContent(content)
infoWindow.open(map, marker);
}
if(map && items){
renderedItems.forEach(e => e.setMap(null));
const newRender = [];
items.forEach(e => {
const newMarker = new window.google.maps.Marker({
position: e.location
});
if(e.content){
newMarker.addListener("click", () => open(newMarker, e.content));
}
newRender.push(newMarker);
newMarker.setMap(map);
});
setRenderedItems(newRender);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [map, items, infoWindow]);
Related
codesandbox.io/s/github/Tmcerlean/battleship
I am developing a simple board game and need to increment a state variable when a player clicks on a cell with a valid move.
The functionality for validating the move and making the move is all in place, however, I am having difficulty updating the state within the event listener.
I can see that the state is being updated when observed from a useEffect hook, but not when viewed from within the function (even following successive calls).
I have done some reading and believe it could have something to do with having a stale closure, but I am not certain.
My approach to solve this issue was to remove and then re-add the click event listener following every click by the user.
My assumption was that this would cause the correct (newly incremented) state variable to be picked up. Unfortunately, this does not appear to be the case and within the event listener function, the variable is never incremented from 0.
I initialise the state variable here:
const [placedShips, setPlacedShips] = useState(0);
Next, a click event listener is applied to each cell within the gameboard:
const clickListener = (e) => {
e.stopImmediatePropagation();
let direction = currentShip().direction;
let start = parseInt(e.target.id);
let end = start + currentShip().length - 1;
if (playerGameboard.checkValidCoordinates(direction, start, end)) {
playerGameboard.placeShip(placedShips, direction, start, end);
setPlacedShips((oldValue) => oldValue + 1);
console.log(placedShips);
}
};
const setEventListeners = () => {
const gameboardArray = Array.from(document.querySelectorAll(".cell"));
gameboardArray.forEach((cell) => {
cell.addEventListener("click", (e) => {
clickListener(e);
});
});
};
You will see that the setPlacedships state variable is incremented here and there is a console log to report its value.
I am aware that the useState hook is asynchronous and so console.log will show 0 for the first time it is called. Consequently, I have a useEffect hook deployed outside of the function which also contains a console.log to report the changed value of setPlacedShips:
useEffect(() => {
removeEventListeners();
setEventListeners();
console.log(placedShips)
}, [placedShips])
After every click the placedShips variable is incremented by 1 and then two functions are run:
const removeEventListeners = () => {
const gameboardArray = Array.from(document.querySelectorAll(".cell"));
gameboardArray.forEach((cell) => {
cell.removeEventListener("click", (e) => {
clickListener(e);
});
});
};
which is immediately followed by the original setEventListeners function:
const setEventListeners = () => {
const gameboardArray = Array.from(document.querySelectorAll(".cell"));
gameboardArray.forEach((cell) => {
cell.addEventListener("click", (e) => {
clickListener(e);
});
});
};
As mentioned above, the issue is that the console log within the setEventListeners function constantly remains at 0, while the console log within the useEffect hook increments as expected.
For reference, here is the full component I am working on currently:
import React, { useEffect, useState, useLayoutEffect } from "react";
import gameboardFactory from "../../factories/gameboardFactory";
import Table from "../Reusable/Table";
import "./GameboardSetup.css";
// -----------------------------------------------
//
// Desc: Gameboard setup phase of game
//
// -----------------------------------------------
let playerGameboard = gameboardFactory();
const GameboardSetup = () => {
const [humanSetupGrid, setHumanSetupGrid] = useState([]);
const [ships, _setShips] = useState([
{
name: "carrier",
length: 5,
direction: "horizontal",
},
{
name: "battleship",
length: 4,
direction: "horizontal",
},
{
name: "cruiser",
length: 3,
direction: "horizontal",
},
{
name: "submarine",
length: 3,
direction: "horizontal",
},
{
name: "destroyer",
length: 2,
direction: "horizontal",
},
]);
const [placedShips, setPlacedShips] = useState(0);
const createGrid = () => {
const cells = [];
for (let i = 0; i < 100; i++) {
cells.push(0);
}
};
const createUiGrid = () => {
const cells = [];
for (let i = 0; i < 100; i++) {
cells.push(i);
}
let counter = -1;
const result = cells.map((cell) => {
counter++;
return <div className="cell" id={counter} />;
});
setHumanSetupGrid(result);
};
const setUpPlayerGrid = () => {
// createGrid('grid');
createUiGrid();
};
const currentShip = () => {
return ships[placedShips];
};
const clickListener = (e) => {
e.stopImmediatePropagation();
let direction = currentShip().direction;
let start = parseInt(e.target.id);
let end = start + currentShip().length - 1;
if (playerGameboard.checkValidCoordinates(direction, start, end)) {
playerGameboard.placeShip(placedShips, direction, start, end);
setPlacedShips((oldValue) => oldValue + 1);
console.log(placedShips);
}
};
const setEventListeners = () => {
const gameboardArray = Array.from(document.querySelectorAll(".cell"));
gameboardArray.forEach((cell) => {
cell.addEventListener("click", (e) => {
clickListener(e);
});
cell.addEventListener("mouseover", (e) => {
e.stopImmediatePropagation();
let direction = currentShip().direction;
let start = parseInt(cell.id);
let end = start + currentShip().length - 1;
if (currentShip().direction === "horizontal") {
const newShip = [];
if (playerGameboard.checkValidCoordinates(direction, start, end)) {
for (let i = start; i <= end; i++) {
newShip.push(i);
}
newShip.forEach((cell) => {
gameboardArray[cell].classList.add("test");
});
}
} else {
const newShip = [];
if (playerGameboard.checkValidCoordinates(direction, start, end)) {
for (let i = start; i <= end; i += 10) {
newShip.push(i);
}
newShip.forEach((cell) => {
gameboardArray[cell].classList.add("test");
});
}
}
});
cell.addEventListener("mouseleave", (e) => {
e.stopImmediatePropagation();
let direction = currentShip().direction;
let start = parseInt(cell.id);
let end = start + currentShip().length - 1;
if (currentShip().direction === "horizontal") {
const newShip = [];
if (playerGameboard.checkValidCoordinates(direction, start, end)) {
for (let i = start; i <= end; i++) {
newShip.push(i);
}
newShip.forEach((cell) => {
gameboardArray[cell].classList.remove("test");
});
}
} else {
const newShip = [];
if (playerGameboard.checkValidCoordinates(direction, start, end)) {
for (let i = start; i <= end; i += 10) {
newShip.push(i);
}
newShip.forEach((cell) => {
gameboardArray[cell].classList.remove("test");
});
}
}
});
});
};
const removeEventListeners = () => {
const gameboardArray = Array.from(document.querySelectorAll(".cell"));
gameboardArray.forEach((cell) => {
cell.removeEventListener("click", (e) => {
clickListener(e);
});
});
};
useEffect(() => {
setUpPlayerGrid();
// setUpComputerGrid();
}, []);
useEffect(() => {
console.log(humanSetupGrid);
}, [humanSetupGrid]);
// Re-render the component to enable event listeners to be added to generated grid
useLayoutEffect(() => {
setEventListeners();
});
useEffect(() => {
removeEventListeners();
setEventListeners();
console.log(placedShips);
}, [placedShips]);
return (
<div className="setup-container">
<div className="setup-information">
<p className="setup-information__p">Add your ships!</p>
<button
className="setup-information__btn"
onClick={() => console.log(placedShips)}
>
Rotate
</button>
</div>
<div className="setup-grid">
<Table grid={humanSetupGrid} />
</div>
</div>
);
};
export default GameboardSetup;
I am quite confused what is happening here and have been stuck on this problem for a couple of days now - if anybody has any suggestions then they would be highly appreciated!
Thank you.
const removeEventListeners = () => {
const gameboardArray = Array.from(document.querySelectorAll(".cell"));
gameboardArray.forEach((cell) => {
cell.removeEventListener("click", (e) => {
clickListener(e);
});
});
};
The above code does not remove any event listeners, which is probably the reason why 0 is still being logged. You pass a new anonymous function to removeEventListener. Since the function is just created it will never remove any event listeners, because it is not registered as an event listener.
Two different functions that do the same are not equal, which is why the event listener is not removed.
const a = (e) => clickListener(e); // passed to addEventListener
const b = (e) => clickListener(e); // passed to removeEventListener
console.log(a == b); //=> false
To add and remove events you cannot use anonymous functions. You either have to use named functions, or store the function in a variable. Then register and remove the event listener using the function name or variable.
Since you only forward the event to the clickListener you can simply replace your event handler registration with:
cell.addEventListener("click", clickListener);
Then remove it using:
cell.removeEventListener("click", clickListener);
Note that this scenario could've been avoided if you passed your event handlers using a more React approach. Instead of using cell.addEventHandler(...) you could've passed the event on creation of this element. eg. <div className='cell' id={counter} onClick={clickListener} />
When working with React you should try to not manipulate the DOM manually. React Components have Synthetic Events, which means that you don't need to add event listeners the vanilla way.
Just add each synthetic event to the cell component with its corresponding handler.
You can do it in the createUiGrid function:
const createUiGrid = () => {
const cells = [];
for (let i = 0; i < 100; i++) {
cells.push(i);
}
let counter = -1;
const result = cells.map((cell) => {
counter++;
return <div className="cell" id={counter} onClick={onClickHandler} onMouseOut={onMouseOutHandler} onMouseOver={onMouseOverHandler} />;
});
setHumanSetupGrid(result);
};
And then just move the code you did on vanilla to each corresponding handler (be sure to remove all listener manipulation before testing).
I am receiving an undefined error when trying to set canvasRef.current. I have tried many different ways to form a callback ref, but I am getting no luck. How can I wait to fire the onClick function 'handleViewStuff' AFTER canvasRef.current is not undefined?
const Child = (props) => {
const canvasRef = useRef();
const handleViewStuff = useCallback(() => {
apiCall(id)
.then((response) => {
// do stuff
return stuff;
})
.then((result) => {
result.getPage().then((page) => {
const canvas = canvasRef.current;
const context = canvas.getContext('2d'); // error is coming in here as getContext of undefined meaning canvas is undefined'
canvas.height = 650;
const renderContext = {
canvasContext: context,
};
page.render(renderContext);
});
});
}, []);
return (
<Fragment>
<canvas ref={(e) => {canvasRef.current = e}} />
<Button
onClick={handleViewStuff}
>
View Stuff
</Button>
</Fragment>
);
};
export default Child;
Using if-statement
...
if(canvas.current) {
const canvas = canvasRef.current;
const context = canvas.getContext('2d');
}
Using optional chaining
...
const canvas = canvasRef?.current;
const context = canvas?.getContext('2d');
And I found some mistakes in your code.
add dependencies on useCallback
const handleViewStuff = useCallback(() => {
...
}, [canvasRef.current]);
should use ref like this.
<canvas ref={canvasRef} />
I am working on this simple hiking application, with display a map in a modal where i want to set a start point and end point in the modal components state, and then update the parents state.
The problem is that the click handler in the modal does not "see" the updated state.
If i console log the state outside of the click handler, it gives me the updated state.
Im using mapboxGL js, and i wonder if someone knows why this is happening? I am thinking maybe it as something to do with the 'click' event, since it not react onClick event?
Here is the code for the modal component:
export const MapModalContent = ({
newHike, setNewHike, setShowMapModal,
}: MapModalProps) => {
const [map, setMap] = useState<mapboxgl.Map>();
const [startCoords, setStartCoords] = useState<LngLat>();
const [endCoords, setEndCoords] = useState<LngLat>();
const mapRef: React.MutableRefObject<HTMLDivElement | null> = useRef(null);
const [helperString, setHelperString] = useState<IHelperString>(helperStrings[0]);
const [startMarker] = useState(new mapboxgl.Marker());
const [endMarker] = useState(new mapboxgl.Marker());
const [startPointIsSet, setStartPointIsSet] = useState<boolean>(false);
const [endPointIsSet, setEndPointIsSet] = useState<boolean>(false);
// initializes map
useEffect(() => {
if (mapRef.current && !map) {
setMap(new mapboxgl.Map({
accessToken: MAPBOX_ACCESS_TOKEN,
container: mapRef.current,
style: 'mapbox://styles/mapbox/outdoors-v11',
center: [10.748503539483494, 59.92003719905571],
zoom: 10,
}));
}
}, [mapRef]);
// adds controls and click listener to map
useEffect(() => {
if (map) {
addControls({ to: map });
map.on('click', (e) => {
handleSetMarker(e);
});
}
}, [map]);
// these effects console the updated state as wanted
useEffect(() => {
console.log('Start coord: ', startCoords);
}, [startCoords]);
useEffect(() => {
console.log('End coord: ', endCoords);
}, [endCoords]);
useEffect(() => {
console.log('Start is set: ', startPointIsSet);
}, [startPointIsSet]);
useEffect(() => {
console.log('End is set: ', endPointIsSet);
}, [endPointIsSet]);
// Todo: Remove this..
setTimeout(() => {
if (map) map.resize();
}, 500);
// this is the click handler that does not respond to state changes
const handleSetMarker = (e: mapboxgl.MapMouseEvent & mapboxgl.EventData) => {
console.log('👆', `start point: ${startPointIsSet}`, `end point: ${endPointIsSet}`);
if (!startPointIsSet) {
console.log('Start point not set.. Gonna set it now!');
// setStartCoords(e.lngLat);
startMarker.setLngLat(e.lngLat).addTo(map!);
setStartCoords(e.lngLat);
setStartPointIsSet(true);
}
if (startPointIsSet && !endPointIsSet) {
console.log('Start point is set! Setting end point..');
endMarker.setLngLat(e.lngLat).addTo(map!);
setEndCoords(e.lngLat);
setEndPointIsSet(true);
}
};
const handleButtonTap = () => {
if (startCoords) {
// displays a new message to the user after setting start point
setHelperString(helperStrings[1]);
} else {
console.warn('No start coords set!');
}
// sets parents state
if (startCoords && endCoords) {
setNewHike({
...newHike,
start_point: getPointString({ from: startCoords }),
end_point: getPointString({ from: endCoords }),
});
setShowMapModal(false);
} else {
console.warn('Some coords is null!', startCoords, endCoords);
}
};
return (
<>
<MapContainer ref={mapRef} />
<p style={{ margin: '1em auto 1em auto' }}>{ helperString.sentence }</p>
<IonButton onClick={handleButtonTap}>{ helperString.button }</IonButton>
</>
);
};
I've tried lifting the state up to the parent, but it gave me the exact same result.
I've also tried adding two separate click events to the map with no luck.
And I gave it a try with the 'react-mapbox-gl' wrapper, but the same problem arose.
It looks like because your handler is attached as a callback, it closes over the React state.
map.on('click', (e) => {
handleSetMarker(e);
});
Try useCallback with the proper dependencies.
const handleSetMarker = useCallback((e: mapboxgl.MapMouseEvent & mapboxgl.EventData) => {
console.log('👆', `start point: ${startPointIsSet}`, `end point: ${endPointIsSet}`);
if (!startPointIsSet) {
console.log('Start point not set.. Gonna set it now!');
// setStartCoords(e.lngLat);
startMarker.setLngLat(e.lngLat).addTo(map!);
setStartCoords(e.lngLat);
setStartPointIsSet(true);
}
if (startPointIsSet && !endPointIsSet) {
console.log('Start point is set! Setting end point..');
endMarker.setLngLat(e.lngLat).addTo(map!);
setEndCoords(e.lngLat);
setEndPointIsSet(true);
}
}, [startPointIsSet, endPointIsSet, endMarker, startMarker, map]);
I've been trying to solve this but no matter what solution I do, it is still stuck in a infinite loop.
Here is the code
const [carr, setCarr] = useState({})
useEffect(() => {
sortedRosterCollection.once('value', (snap) => {
snap.forEach((doc) =>{
if (doc.key==="Carr Intermediate"){
var school = doc.key;
var mentorList = doc.val();
var schoolMentor = {school:school, mentors: mentorList};
setCarr(schoolMentor)
console.log(carr)
}
});
});
},[carr]);
No matter what I do "console.log(carr)" is fired endlessly.
If you want to inspect the value of carr whenever it's changed, put it into another use effect:
const [carr, setCarr] = useState({})
useEffect(() => {
sortedRosterCollection.once('value', (snap) => {
snap.forEach((doc) => {
if (doc.key === "Carr Intermediate") {
var school = doc.key;
var mentorList = doc.val();
var schoolMentor = {
school: school,
mentors: mentorList
};
setCarr(schoolMentor)
}
});
});
}, []);
useEffect(() => {
console.log(carr)
}, [carr])
You don't forget cleanup function in useEffect hook like this:
useEffect(() => {
effect
return () => {
cleanup
}
}, [input])
I used to make this problem like you because useEffect can compare two object.
You can make the reference to the link: https://medium.com/javascript-in-plain-english/comparing-objects-in-javascript-ce2dc1f3de7f. And I check changed by using below code:
function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
}
When I click, I set the saveMouseDown state to 1, when I release I set it to 0.
When I click and move the mouse I log out mouseDown and it's 0 even when my mouse is down? Yet on the screen it shows 1
import React, { useEffect, useRef, useState } from 'react';
const Home: React.FC = () => {
const [mouseDown, saveMouseDown] = useState(0);
const [canvasWidth, saveCanvasWidth] = useState(window.innerWidth);
const [canvasHeight, saveCanvasHeight] = useState(window.innerHeight);
const canvasRef = useRef<HTMLCanvasElement>(null);
let canvas: HTMLCanvasElement;
let ctx: CanvasRenderingContext2D | null;
const addEventListeners = () => {
canvas.addEventListener('mousedown', (e) => { toggleMouseDown(); }, true);
canvas.addEventListener('mouseup', (e) => { toggleMouseUp(); }, true);
};
const toggleMouseDown = () => saveMouseDown(1);
const toggleMouseUp = () => saveMouseDown(0);
const printMouse = () => console.log(mouseDown);
// ^------ Why does this print the number 1 and the 2x 0 and then 1... and not just 1?
const removeEventListeners = () => {
canvas.removeEventListener('mousedown', toggleMouseDown);
canvas.removeEventListener('mouseup', toggleMouseUp);
};
useEffect(() => {
if (canvasRef.current) {
canvas = canvasRef.current;
ctx = canvas.getContext('2d');
addEventListeners();
}
return () => removeEventListeners();
}, []);
useEffect(() => {
if (canvasRef.current) {
canvas = canvasRef.current;
canvas.addEventListener('mousemove', (e) => { printMouse(); }, true );
}
return () => canvas.removeEventListener('mousemove', printMouse);
}, [mouseDown, printMouse]);
return (
<React.Fragment>
<p>Mouse Down: {mouseDown}</p>
{/* ^------ When this does print 1? */}
<canvas
id='canvas'
ref={canvasRef}
width={canvasWidth}
height={canvasHeight}
/>
</React.Fragment>
);
};
export { Home };
You only add the move listener once when the component mounted, thus enclosing the initial mouseDown value.
Try using a second useEffect hook to specifically set/update the onMouseMove event listener when the mouseDown state changes. The remove eventListener needs to specify the same callback.
useEffect(() => {
if (canvasRef.current) {
canvas = canvasRef.current;
canvas.addEventListener('mousemove', printMouse, true );
}
return () => canvas.removeEventListener('mousemove', printMouse);;
}, [mouseDown, printMouse]);
It may be simpler to attach the event listeners directly on the canvas element, then you don't need to worry about working with enclosed stale state as much with the effect hooks.
<canvas
onMouseDown={() => setMouseDown(1)}
onMouseUp={() => setMouseDown(0)}
onMouseMove={printMouse}
width={canvasWidth}
height={canvasHeight}
/>