JavaScript(React)- 未捕获的类型错误：无法读取未定义的属性（读取“样式”）

Question

I am working in a project using React Js. When I wrote this, Syntax: movieRef.current.style.transform = translateX(210px) ; it's not working. It shows an error- can't read 'style'. How can I solve this problem. I have attached my codes here.

 import React, { useState, useRef } from "react"; import { useGetMoviesQuery } from "../../services/movieApi"; import SingleMovie from "../SingleMovie/SingleMovie"; import "./MovieRow.scss"; import "../SingleMovie/SingleMovie.scss"; import { MdArrowForwardIos, MdArrowBackIos } from "react-icons/md"; // const MovieRow = ({title}) => {codes} const MovieRow = (props) => { const { title, fetchURI } = props; const { data, isLoading } = useGetMoviesQuery(fetchURI); const movieRef = useRef(); // console.log("data:", data); if (isLoading) { return ( <div> <h1 style={{ textAlign: "center", marginTop: "250px" }}>Loading...</h1> </div> ); } const handleClick = (direction) => { if (direction === "left") { movieRef.current.style.transform = `translateX(210px)`; } }; return ( <> <div className="movie-row-container"> <h1>{title}</h1> <div className="wrapper"> <MdArrowForwardIos className="slider right-arrow" onClick={() => handleClick("right")} /> <div className="movie-row-block" ref={movieRef}> {data?.results.map((movie, index) => ( <SingleMovie key={movie?.id} singleMovie={movie} index={index} /> ))} </div> <MdArrowBackIos className="slider left-arrow" onClick={handleClick("left")} /> </div> </div> </> ); }; export default MovieRow;

 //MovieRow.scss file h1 { font-family: sans-serif; font-size: 100%; color: white; } // non-global css.movie-row-container { margin-top: 25px; margin-left: 22px; .wrapper { position: relative; .slider { height: 100%; width: 70px; background-color: rgba(12, 42, 214, 0.438); color: white; position: absolute; z-index: 99; margin: 0 auto; cursor: pointer; &.right-arrow { right: 0; } &.left-arrow { left: 0; } }.movie-row-block { display: flex; overflow-x: scroll; overflow-y: hidden; transform: translateX(210px); } }.movie-row-block::-webkit-scrollbar { display: none; } }

Answer 1

This part is firing infinitely even before the first render, that's why you'll get undefined on style :

          <MdArrowBackIos
            className="slider left-arrow"
            onClick={handleClick("left")}
          />

Change it to this:

           <MdArrowBackIos
             className="slider left-arrow"
             onClick={handleClick.bind(undefined, "left")}
           />