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

Question

Hey guys I have two questions about the react.js hook. Please help. Get confused a few days:(
1.What is the difference between using [] and without [] in the useState()
I noticed that when using useState([]) the console.log(array) will be like

(100) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

However when I use useState() in my code it will look like the following, and I couldn't use array.length there will be an error saying "cannot read property length of undefined"

Array(100)
0: {id: "181913649", name: "Drake Hotline Bling", url: "https://i.imgflip.com/30b1gx.jpg", width: 1200, height: 1200, …}
1: {id: "112126428", name: "Distracted Boyfriend", url: "https://i.imgflip.com/1ur9b0.jpg", width: 1200, height: 800, …}
2: {id: "87743020", name: "Two Buttons", url: "https://i.imgflip.com/1...
.
.

2.Also, when do we use {} in useState({})? I do know that {} is for object.Please give some examples:(

Following is the main code App.js:

function App() {
  const [array,setarray]=useState([])

  useEffect(()=>{
    fetch("https://api.imgflip.com/get_memes")
      .then(response => response.json())
      .then(response => {
          const {memes} = response.data
          console.log(memes[0].url)

          setarray(memes)
          
      })
  },[])
  console.log(array)
  console.log(array[0])
  console.log(array.length)
  
  return (
    <div>
      <Header />
      <Control data={array}/>
    </div>
  );
}

export default App;

Answer 1

If you call useState() without passing an argument, the initial value of the state variable ( array ) will be undefined . Trying to read the property length of array (ie array.length ) will then give an error:

const [array, setArray] = useState()

console.log(array) //=> undefined
console.log(array.length) //=> Uncaught TypeError: Cannot read property 'length' of undefined

If you call useState([]) , ie you pass an empty array as the argument, the initial value of the state variable ( array ) will be an empty array ( [] ). Trying to read the property length of array (ie array.length ) will then work fine:

const [array, setArray] = useState([])

console.log(array) //=> []
console.log(array.length) //=> 0

If you are going to set array to an array later – and you are, in the useEffect() – it's a good practice to set the initial value to an empty array. Then you can safely treat array like it's an array, ie you don't have to check if it's undefined or an array.

Similarly, you might want to use {} as the initial value if your state is later going to be an object. This can be useful to prevent errors. For example:

const [obj, setObj] = useState()

console.log(obj) //=> undefined
console.log(obj.length) //=> Uncaught TypeError: Cannot read property 'length' of undefined
console.log(Object.entries(obj)) //=> Uncaught TypeError: Cannot convert undefined or null to object

// versus

const [obj, setObj] = useState({})

console.log(obj) //=> {}
console.log(obj.length) //=> undefined
console.log(Object.entries(obj)) //=> []

( obj.length probably doesn't make much sense, but it's just an example.)

Answer 2

Square brackets [] will create an Array object and while using curly brackets {} creates a plain object . it's really a matter of how you would like to be able to access the data. you can even set argument to useState('') . Without using initial value useState() it will be undefined

Arrays only hold values:

const numbers = [2, 3, 4, 5, 35]
const myNumbers = numbers .map(item=> {
    return item* 2
})

Output
[ 4, 6, 8, 10, 70 ]

array Objects have key-value pairs. Mostly we use whenever we want to create and store a list of multiple items in a single variable

const products = [
    { id: '1', name: 'Foo' },
    { id: '2', name: 'bar' }
];
const myProducts = products.map((item, key) => {
    return (
        <tr key={key}>
            <td>{item.id}</td>
            <td>{item.name}</td>
        </tr>
    );
});

furthermore, if you iterate data using map() {} this give you Unhandled Rejection (TypeError): products.map is not a function as it is plain object.

const [products, setProducts] = useState({});

products.map((item) => {
    return item; })

by using const [products, setProducts] = useState([]); you will get products.length = 0 without error.