Por favor, primero mira mi código.

Hice esto para presentar mi código claramente. Puede haber alguna falta de ortografía. por favor sea comprensible!

 //parent component <Component nickname={nickname} />

 //child component //nickname is a prop of dynamic routing. const test = ({nickname}) => { const [number, setNumber] = useState(''); const [array, setArray] = useState([]); const getNumber = () => { const url = '/api/number'; const data = { nickname = nickname } axios.post(url, data) .then((res) => { setNumber(res.NUMBER) }) }; useEffect(() => { getNumber() }, [nickname]) //when nickname (dynamic routing url) changes, the statement executes. const getItem = async () => { const url = '/api/get'; const data = { id : number }; await axios.get(url, data) .then((res) => { setArray([...array, res]) }) }; useEffect(() => { getItem() }, []) return ( <> <div> { array.map((arr) => ( {arr.name} )) } </div> </> ) }

A partir de este código, tengo problemas para obtener diferentes elementos.

Cada vez que ingreso una URL diferente, la matriz debe cambiarse ya que doy un número diferente en

 const getItem = async () => { const url = '/api/get'; const data = { id : number }; await axios.get(url, data) .then((res) => { setArray([...array, res]) }) };

aquí.

Pero parece que no hay cambios incluso si ingreso una URL diferente.

Sin embargo, cuando edito directamente el estado del número, cambia apropiadamente.

No sé lo que está pasando, y buscando algo de sabiduría.