使用带 [] 和不带 [] 的 useState 以及带 {} 的 useState 之间的区别

Question

大家好，我有两个关于react.js 钩子的问题。请帮忙。困惑了几天:( \n1.在 useState() 中使用 [] 和不使用 []
有什么区别\n我注意到在使用useState([])时
时console.log(array) 会像

\n

(100)\xc2\xa0[{\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}]\n

\n

但是，当我在代码中使用useState()时，它将如下所示，并且我无法使用array.length，会出现错误“无法读取未定义的属性长度”

\n

Array(100)\n0: {id: "181913649", name: "Drake Hotline Bling", url: "https://i.imgflip.com/30b1gx.jpg", width: 1200, height: 1200, \xe2\x80\xa6}\n1: {id: "112126428", name: "Distracted Boyfriend", url: "https://i.imgflip.com/1ur9b0.jpg", width: 1200, height: 800, \xe2\x80\xa6}\n2: {id: "87743020", name: "Two Buttons", url: "https://i.imgflip.com/1...\n.\n.\n

\n

2.另外，我们什么时候在 useState({}) 中使用 {} ？我确实知道 {} 代表对象。请举一些例子:(

\n

App.js主要代码如下：

\n

function App() {\n  const [array,setarray]=useState([])\n\n  useEffect(()=>{\n    fetch("https://api.imgflip.com/get_memes")\n      .then(response => response.json())\n      .then(response => {\n          const {memes} = response.data\n          console.log(memes[0].url)\n\n          setarray(memes)\n          \n      })\n  },[])\n  console.log(array)\n  console.log(array[0])\n  console.log(array.length)\n  \n  return (\n    <div>\n      <Header />\n      <Control data={array}/>\n    </div>\n  );\n}\n\nexport default App;\n

\n

Answer 1

如果调用时useState()不传递参数，array则状态变量 ( )的初始值为undefined。尝试读取（length即arrayarray.length属性将给出错误：

\n

const [array, setArray] = useState()\n\nconsole.log(array) //=> undefined\nconsole.log(array.length) //=> Uncaught TypeError: Cannot read property \'length\' of undefined\n

\n

如果调用useState([])，即传递一个空数组作为参数，则状态变量 ( array) 的初始值将是一个空数组 ( [])。尝试读取(ie )length的属性将可以正常工作：arrayarray.length

\n

const [array, setArray] = useState([])\n\nconsole.log(array) //=> []\nconsole.log(array.length) //=> 0\n

\n

如果您稍后要设置array为数组 \xe2\x80\x93 并且在useEffect()\xe2\x80\x93 中，将初始值设置为空数组是一个很好的做法。然后你可以安全地把array它当作一个数组，即你不必检查它是否是undefined一个数组。

\n

{}同样，如果您的状态稍后将成为一个对象，您可能希望用作初始值。这对于防止错误很有用。例如：

\n

const [obj, setObj] = useState()\n\nconsole.log(obj) //=> undefined\nconsole.log(obj.length) //=> Uncaught TypeError: Cannot read property \'length\' of undefined\nconsole.log(Object.entries(obj)) //=> Uncaught TypeError: Cannot convert undefined or null to object\n\n// versus\n\nconst [obj, setObj] = useState({})\n\nconsole.log(obj) //=> {}\nconsole.log(obj.length) //=> undefined\nconsole.log(Object.entries(obj)) //=> []\n

\n

（obj.length可能没有多大意义，但这只是一个例子。）

\n