JavaScript(React)- uncatch TypeError：无法读取undefined的属性(读取'style')

Question

我在一个使用React Js的项目中工作。当我写这篇文章时，语法：movieRef.current.style.transform=translateX(210px)它不起作用。它显示了一个错误-无法读取"style"。我该如何解决这个问题。我在这里附上了我的代码。

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

即使在第一次渲染之前，这个部分也会无限激发，这就是为什么style:上会出现未定义的情况

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

更改为：

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