Getting TypeError: Object(...) is not a function error when trying to change a state property

Question

我是 React 的新手，正在尝试在代码中实现评级功能。谁能告诉我，为什么我在尝试更改状态属性时出现 TypeError: Object(...) is not a function 错误当设置 Rating 组件 onChange 属性时。

我的代码

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状态的函数。在这里，我们使用扩展运算符 ... 来确保仅覆盖所需的属性（此处为 rating），其余值保持不变。

Getting TypeError: Object(...) is not a function error when trying to change a state property

Getting TypeError: Object(...) is not a function error when trying to change a state property

javascript

typeerror

setstate

reactjs

react-rating