Reactjs 如何修复错误：对象作为React子对象无效（找到：具有键{}的对象）

这是我的密码：

import './NameCell.css';
import RosterTableCell from '../rosterTableCell/RosterTableCell';
function NameCell(props){
    return (
        <RosterTableCell className="nameCell" content={props.content}/>
    )
}
export default NameCell;

//=================================================================================
import NameCell from '../nameCell/NameCell';
function RosterRow(props) {
    return(
        <tr>
            <NameCell content={props.rosterData.itoName}/>
        </tr>
    );
  }
export default RosterRow;
//=================================================================================
import { useEffect,useState} from 'react';
import Roster from '../../../utils/roster';
import RosterRow from './RosterRow';
function TableBody(props){
    const [rosterList, setRosterList] = useState({});
  
    useEffect(() => {
      const getData = async () => {
        let roster = new Roster();
        let rosterData = await roster.get(props.rosterYear, props.rosterMonth);
        let rows=[];
        Object.keys(rosterData).forEach(itoId=>{
          rows.push(<RosterRow rosterData={rosterData[itoId]}/>);
        });
        console.log(rows);       
        setRosterList(rows);
      };
      getData();
    }, [props.rosterYear, props.rosterMonth]);
    return (
        <tbody>
          {rosterList}
        </tbody>
    )
}
export default TableBody;

---

但是，TableBody的变量行已经是数组了，为什么错误仍然存在？

您正在用一个对象初始化您的状态

{}

使用数组

const [rosterList, setRosterList] = useState([]);

---

您正在使用对象

{}

初始化您的状态

使用数组

const [rosterList, setRosterList] = useState([]);

---

因为您将初始名册设置为对象。将其设置为null或空数组将解决此问题。

因为您将初始名册列表设置为对象。将其设置为null或空数组可以解决此问题。

change

useState（{}）到
useState（[]）更改<代码>使用状态（{}）到
useState（[]）