为什么下面的 react 功能组件不能正常工作？

Question

It is quite straight forward, when you press "add" it should add(and it adds) and when you press "remove" it should pop the last element and re-render the list but it doesn't. I am make mistake somewhere?

import React, { useState, useEffect } from 'react';


const Test = () => {
    const [list, setList] = useState([]);
    const add = () => {
        setList([list.length, ...list]);
    }

    const remove = () => {
        list.pop();
        setList(list);
    }

    useEffect(() => {
        console.log(list)
    }, [list])

    return (<ul>
        <button onClick={add}>add</button>
        <button onClick={remove}>remove</button>
        {list.map(el => <li>{el}</li>)}
    </ul>)
}

export default Test;

UPDATE: Actually it updates the state by removing the last element but the re-render happen only when button "add" is pressed

Answer 1

It's not recommended to modify the state itself because it is immutable.

So instead using .pop() on the original state of the array, first I suggest to clone that one and remove the required element from there, then the result should passed to setList() function.

Try as the following instead:

const remove = () => {
    const copy = [...list];
    copy.pop();
    setList(copy);
}

Think about the following:

 const list = [1,3,5,6,7]; const copy = [...list]; copy.pop(); console.log(list); console.log(copy);

I hope this helps!

Answer 2

You need to set a new array in this case, setList(list) will not cause React to re-render because it's still the same array you're using.

Try setList([...list]) in your remove function.

There's also an alternative to pop , and doesn't mutate the original variable:

  const remove = () => {
    const [removed, ...newList] = list
    setList(newList)
  }