当 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;