使用MUI Core基础Rating组件时为何出现setValue未定义错误？

错误原因 #

你没通过useState声明状态变量和对应的更新函数，直接调用setValue自然会提示未定义。另外代码里import开头少了字母i，属于笔误，也需要修正。

修正步骤 #

1. 在App组件内部初始化状态，把默认值设为1（对应激活第一个评分星星）：

const [value, setValue] = useState(1);

2. 将Rating组件的value属性绑定到这个状态变量，确保受控组件正常工作。

修正后的完整代码 #

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Movie from './components/movie';
import data from './data';
import Rating from '@mui/material/Rating';
import React, { useState } from 'react';

function App() {
  // 初始化状态，默认激活第一个评分（value=1）
  const [value, setValue] = useState(1);
  
  console.log(data)
  return (
    <div className="App">
      <Rating
        name="simple-controlled"
        value={value}
        onChange={(event, newValue) => {
          setValue(newValue);
        }}
      />
    </div>
  );
}

export default App;

关键说明 #

• useState(1)：指定初始评分值为1，页面加载时第一个星星会被激活
• value={value}：将Rating组件的值与状态变量绑定，实现受控组件
• setValue(newValue)：通过useState返回的更新函数修改状态，实现评分变化时的响应

内容的提问来源于stack exchange，提问作者aya