當 useState 更新時，map 循環在 useState 中的對象內部的數組中不起作用。 反應 js

Question

當 useState 更新時，map 循環在 useState 中的對象內部的數組中不起作用。 反應 js

import { useState } from "react";
import React from "react";

function Check() {
    
const [Children, setChildren] = useState({data:[], otherdata:{}});
  
 function handleChange(){
 Children["data"] = [...Children["data"], Children["data"].length]
 setChildren(Children)
 alert(Children["data"])
 }

  return (<React.Fragment>
    <div>Check</div>
    {Children["data"].map(data => <div>map</div>)}
    <button
     onClick={handleChange}
    >Add List</button>
  </React.Fragment>);
}
    
export default Check

Answer 1

為了更新你的狀態，你必須使用你的狀態設置器，在這種情況下是setChildren而不是直接設置你的狀態（不做Children["data"] = [...Children["data"], Children["data"].length] ）。

Answer 2

試試這個我有固定的問題-

 import { useState } from "react"; import React from "react"; function Check() { const [Children, setChildren] = useState({ data: [], otherdata: {} }); function handleChange() { setChildren({ ...Children, data: [...Children["data"], Children["data"].length], }); } return ( <React.Fragment> <div>Check</div> {Children.data.map((ele) => ( <div>{ele}</div> ))} <button onClick={handleChange}>Add List</button> </React.Fragment> ); } export default Check;