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

Question

我对 React 非常陌生，并试图在代码中实现评级功能。 谁能告诉我为什么在设置了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>
    </>
  );
}

Answer 1

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

您的功能应如下所示：

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

Answer 2

在尝试更新状态值时，您应该使用set_movie_detail而不是setState 。

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

set_movie_detail是更新movie_detail状态的movie_detail 。 在这里，我们使用扩展运算符...来确保仅覆盖所需的属性（此处为rating ），而其余值保持不变。