在 React 中获取数据的问题，分配给常量变量

Question

我刚开始学习 React，正在尝试获取一些随机数据。我创建了一个 useState 并有两个值：const [name, setName] = useState([]); 当我尝试做 name : response.json(); 我得到一个错误，分配给一个常量变量，我正在按照一个教程做同样的事情。令人惊讶的是，当我创建一个具有不同名称的常量变量时，它起作用了。我只是无法分配 name = await response.json(); 谢谢

import React, { useEffect, useState } from "react";
import { ReactDOM } from "react";

const FetchData = () =>{

    const [name, setName] = useState([]);

    const fetchNames = async () =>{

        const url = `https://randomuser.me/api`;

        try {
            
            const response = await fetch(url);
            name = await response.json();
            console.log(name);
           setName(name);
        
        } catch (error) {
            
            console.log(error);
        }
    }

    useEffect(()=>{

        fetchNames();
    },[])

    return(

        <div>

        </div>
    );
}

export default FetchData;

Answer 1

有两件事可能有助于消除这种困惑

任何使用 const 创建的变量将永远保持它声明时的值，所以例如如果我们有 const x = ""，我们以后不能做任何事情喜欢 x = "something else"
在您分享的片段中 name 是一个“状态变量”。状态变量不应该直接更新，状态更新只能通过 setState 函数发生（即本例中的 setName）

这是官方文档中谈论它的部分https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly , https://reactjs.org/docs/hooks-state.html#updating-state

Answer 2

检查我的示例，据我了解，您想在 try 中使用名称作为变量而不是来自状态的变量，因此您应该添加 const。我还在您的渲染中映射了响应，您可以看到结果。这里还有 codesandbox 示例 https://codesandbox.io/embed/friendly-ishizaka-57i66u?fontsize=14&hidenavigation=1&theme=dark

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [name, setName] = useState([]);

  const fetchNames = async () => {
    const url = `https://randomuser.me/api`;

    try {
      const response = await fetch(url);
      constname = await response.json();
      console.log(name);
      setName(name?.results);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    fetchNames();
  }, []);

  return (
    <div>
      {name.map((el) => (
        <>
          <p>{el.email}</p>
          <p>{el.phone}</p>
        </>
      ))}
    </div>
  );
}

在 React 中获取数据的问题，分配给常量变量

Problem with fetching data in React, Assignment to constant variable

reactjs

fetch-api