React useState：将子数组推入数组

Question

Am using function based component and am having trouble in pushing a subarray into a useState array. my code is shown below. There is an array called mode coming from the props which i need to append it as a sub array of more

const ViewCharts = (props) =>{

//other codes

let [more,setMore] = useState([])

useEffect(()=>{
        console.log(props.mode,' mode array')
        let temp = [...more,props.mode]
        console.log(temp, ': this will append to more')
        setMore(temp)
        setTimeout(()=>{
            console.log(more,'after setting')
        },2000)
},[//some value])

}

when the props.mode has value ['top','bottom'] i expect more to have value of [['top','bottom']] and when next time if the props.mode is ['top'] i need more to have [['top','bottom'],['top']] . but this is what am getting when i run the above code.

["top"] mode array

["top"]: this will append to more"

[]: " after setting "

why the setMore is not adding array even when the temp is having the expected value.

Answer 1

If I remember correctly the useState variable will change value in the next render when you set it. You are trying to read the new more value in the same render you've changed it (as you are reading it in the same effect you've set the value in) , which will be [] the first time as that's how you initialised it.

Try creating a second useEffect with a more dependency to see if it gives you the value you want:

// You can also just console.log() before the return, needing no `useEffect` to see if the value indeed changed.
React.useEffect(() => {
  console.log('More: ', more);
}, [more]);

https://reactjs.org/docs/hooks-state.html#recap

Line 9: When the user clicks, we call setCount with a new value. React will then re-render the Example component, passing the new count value to it.

I would suggest reading the hooks API to better understand how they work.