ReactJS中fetch获取的接口数据如何正确赋值给数组类型state

• 响应解析格式错误
  你当前使用response.text()把接口返回的JSON数据转成了纯字符串，若要将数据存入数组类型的状态，需要用response.json()把响应解析为JS对象/数组格式。
• 对React useState的异步更新机制认知有误
  setProfile是异步更新方法，调用后不会立刻修改当前作用域下的Profile变量，要等到下一次组件重渲染才会拿到更新后的值，你在调用setProfile后立刻打印Profile拿到的还是更新前的旧值，并非赋值失败。
• useEffect的调试逻辑位置错误
  你当前写的useEffect只有在组件卸载、或者依赖项变化触发effect重新执行前，才会执行清理函数打印Profile，正常更新时不会触发打印，所以你看不到更新后的结果。

// 注意：如果接口返回的是单个用户对象而非数组，建议把初始化改成useState({})，避免类型不匹配
const [Profile,setProfile]=useState([]);
const [username,setUsername]=useState('');
const [password,setPassword]=useState('');
const [logout,setLogout]=useState(0);

// 新增：监听Profile变化，每次更新后打印最新值
useEffect(() => {
  console.log('Profile已更新：', Profile);
}, [Profile])

const login = () => {
  var myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/json");
  // 提示：Access-Control-* 属于跨域响应头，需要服务端配置，前端添加无效还可能触发预检失败，建议删除
  var raw = JSON.stringify({username, password});
  
  var requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: raw,
    redirect: 'follow'
  };
  
  fetch("http://localhost/scheduleapp/api/personals/login", requestOptions)
    // 把text改为json，解析为JS对象/数组
    .then(response => response.json())
    .then(response =>{
      setProfile(response);
      localStorage.setItem('Logged',JSON.stringify(response)); // 存入localStorage需要转成字符串格式
    })
    .catch(error => console.log('error', error));
}

内容的提问来源于stack exchange，提问作者OĞUZHAN ŞENOKUR