时间戳

首页 > 解决方案 > 获取 TypeError：尝试更改状态属性时，Object(...) 不是函数错误

javascript - 获取 TypeError：尝试更改状态属性时，Object(...) 不是函数错误

问题描述

我对 React 非常陌生，并试图在代码中实现 Rating 功能。谁能告诉我为什么在设置Rating组件onChange属性时尝试更改状态属性时出现TypeError: Object(...) is not a function error 。

我的代码

export default function Details(props) {

const [movie_detail, set_movie_detail] = useState({
    poster_url:"",
    artists:[],
    title:"",
    genres:[],
    duration:0,
    release_date:"",
    rating:0,
    storyline:"",
    id:"",
    wiki_url:"",
    trailer_url:"",
    censor_board_rating:""
  });

    async function data(){
        const data = await fetch(props.baseUrl + "movies/"+props.match.params.id ,
        {
            method: "GET",
            headers: {
                "Content-Type": "application/json",
                "Cache-Control": "no-cache"
            }
        });
        const rawData = await data.json();
        set_movie_detail(rawData);
    }

    const handleRatingChange = (value) =>{
        console.log(value);
        setState({rating:value});
    }

    useEffect(() => {
        data();
    }, []);

  return (
    <>
      <Header baseUrl={props.baseUrl} movieid={movie_detail.id} ></Header>
        .........

        <div className="column3">
          <Typography>
            <b>Rate this movie</b>
          </Typography>
          <Rating
            name="rating"
            value={movie_detail.rating/2}
            max={5}
            onChange={handleRatingChange}
            icon=
                {
                    <StarBorderIcon 
                    style={{color:"black"}}
                    />
                }
            /> 
      </div>
    </>
  );
}

标签： javascriptreactjstypeerrorsetstatereact-rating

解决方案

您应该使用更新状态的函数的正确名称。在这种情况下set_movie_detail，而不是setState. 您还应该将更新与之前的状态合并，而不是覆盖它。

您的功能应如下所示：

const handleRatingChange = (value) => {
  console.log(value);
  set_movie_detail((prevState) => { ...prevState, rating: value });
}

推荐阅读