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

【问题标题】：Getting TypeError: Object(...) is not a function error when trying to change a state property获取 TypeError：尝试更改状态属性时，Object(...) 不是函数错误
【发布时间】：2021-12-07 02:15:46
【问题描述】：

我对 React 非常陌生，并试图在代码中实现 Rating 功能。谁能告诉我，为什么我在尝试更改状态属性时遇到 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>
    </>
  );
}

【问题讨论】：

setState 从何而来？

标签： javascript reactjs typeerror setstate react-rating

【解决方案1】：

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

你的函数应该如下：

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

【讨论】：

他也应该和之前的状态合并，因为这是一个功能组件
不过，这会从状态中删除任何其他内容。
我更新了我的答案以添加与先前状态的合并而不是覆盖它。

【解决方案2】：

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

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

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

【讨论】：