Reactjs React:Muuri React生成随机项错误-未捕获不变：不变失败：尚未设置项

演示如何生成和添加随机项

代码上有一个小的修改，随机生成3个项目，而不是再添加3个随机项目。当我在codepen中修改并运行它时，这些项目可以成功渲染。然而，当我在本地机器上试用时，它却不能

当我单击“生成项”按钮时，div上没有显示任何内容，第二次单击后，控制台上显示错误消息“Uncaught Invariant:Invariant failed:该项尚未设置为Invariant”

谁能告诉我出了什么问题

代码如下：

import { useFilter, generateItems, options } from "./utils";
import { MuuriComponent } from "muuri-react";
import './style.css'

function MuuriDemo() {
    const [items, setItems] = useState(generateItems());

    const Item = ({ color, width, height, title, remove }) => {
        console.log(color);
        return (
            <div className={`item h${height} w${width} ${color}`}>
                <div className="item-content">
                    <div className="card">
                        <div className="card-title">{title}</div>
                        <div className="card-remove">
                            <i className="material-icons" onMouseDown={remove}>
                                &#xE5CD;
                  </i>
                        </div>
                    </div>
                </div>
            </div>
        );
    };

    // Children.
    const children = items.map(({ id, color, title, width, height }) => (
        <Item
            key={id}
            color={color}
            title={title}
            width={width}
            height={height}
        />
    ));

    return (
        <div>
            <button onClick={() => setItems(generateItems())}>Generate item</button>
            <section className="grid-demo">
            
            <MuuriComponent
                {...options}
                propsToData={({ color, title }) => ({ color, title })}
            >
                {children}
            </MuuriComponent>
            </section>
            
        </div>
    )
}

export default MuuriDemo```

import{useFilter，generateItems，options}来自“/utils”；
从“muuri react”导入{MuuriComponent}；
导入“./style.css”
函数MuuriDemo（）{
const[items，setItems]=useState（generateItems（））；
常量项=（{颜色、宽度、高度、标题、删除}）=>{
控制台。日志（颜色）；
返回(
{title}
；
);
};
//孩子们。
const children=items.map（{id，color，title，width，height}）=>(
));
返回(
setItems（generateItems（））}>生成项
（{颜色，标题}）}
>
{儿童}
)
}
导出默认MuuriDemo```

我已通过以下代码使其工作。我不知道这是否是一种标准方式

import { generateItems, options } from "./utils";
import { MuuriComponent } from "muuri-react";
import './style.css'
import {  render } from "react-dom";

function MuuriDemo() {
    const [items, setItems] = useState(generateItems());

    const Item = ({ color, width, height, title, remove }) => {
        console.log(color);
        return (
            <div className={`item h${height} w${width} ${color}`}>
                <div className="item-content">
                    <div className="card">
                        <div className="card-title">{title}</div>
                        <div className="card-remove">
                            <i className="material-icons" onMouseDown={remove}>
                                &#xE5CD;
                  </i>
                        </div>
                    </div>
                </div>
            </div>
        );
    };

    // Children.
    const children = items.map(({ id, color, title, width, height }) => (
        <Item
            key={id}
            color={color}
            title={title}
            width={width}
            height={height}
        />
    ));

    useEffect(() => {
        render(<div>
            <button onClick={() => setItems(generateItems())}>Generate item</button>
            <section className="grid-demo">
                <MuuriComponent
                    {...options}
                    propsToData={({ color, title }) => ({ color, title })}
                >
                    {children}
                </MuuriComponent>
            </section></div>, document.getElementById('muuri'))
        console.log(children);
    }, [children])

    return (
        <div id='muuri'/>
    )
}

export default MuuriDemo

从“/utils”导入{generateItems，options}；
从“muuri react”导入{MuuriComponent}；
导入“./style.css”
从“react dom”导入{render}；
函数MuuriDemo（）{
const[items，setItems]=useState（generateItems（））；
常量项=（{颜色、宽度、高度、标题、删除}）=>{
控制台。日志（颜色）；
返回(
{title}
；
);
};
//孩子们。
const children=items.map（{id，color，title，width，height}）=>(
));
useffect（（）=>{
渲染(
setItems（generateItems（））}>生成项
（{颜色，标题}）}
>
{儿童}
，document.getElementById（'muuri'））
console.log（儿童）；
}[儿童]）
返回(
)
}
导出默认MuuriDemo

我已通过以下代码使其工作。我不知道这是否是一种标准方式

import { generateItems, options } from "./utils";
import { MuuriComponent } from "muuri-react";
import './style.css'
import {  render } from "react-dom";

function MuuriDemo() {
    const [items, setItems] = useState(generateItems());

    const Item = ({ color, width, height, title, remove }) => {
        console.log(color);
        return (
            <div className={`item h${height} w${width} ${color}`}>
                <div className="item-content">
                    <div className="card">
                        <div className="card-title">{title}</div>
                        <div className="card-remove">
                            <i className="material-icons" onMouseDown={remove}>
                                &#xE5CD;
                  </i>
                        </div>
                    </div>
                </div>
            </div>
        );
    };

    // Children.
    const children = items.map(({ id, color, title, width, height }) => (
        <Item
            key={id}
            color={color}
            title={title}
            width={width}
            height={height}
        />
    ));

    useEffect(() => {
        render(<div>
            <button onClick={() => setItems(generateItems())}>Generate item</button>
            <section className="grid-demo">
                <MuuriComponent
                    {...options}
                    propsToData={({ color, title }) => ({ color, title })}
                >
                    {children}
                </MuuriComponent>
            </section></div>, document.getElementById('muuri'))
        console.log(children);
    }, [children])

    return (
        <div id='muuri'/>
    )
}

export default MuuriDemo

从“/utils”导入{generateItems，options}；
从“muuri react”导入{MuuriComponent}；
导入“./style.css”
从“react dom”导入{render}；
函数MuuriDemo（）{
const[items，setItems]=useState（generateItems（））；
常量项=（{颜色、宽度、高度、标题、删除}）=>{
控制台。日志（颜色）；
返回(
{title}
；
);
};
//孩子们。
const children=items.map（{id，color，title，width，height}）=>(
));
useffect（（）=>{
渲染(
setItems（generateItems（））}>生成项
（{颜色，标题}）}
>
{儿童}
，document.getElementById（'muuri'））
console.log（儿童）；
}[儿童]）
返回(
)
}
导出默认MuuriDemo

如果我使用react dom render，它可以显示我想要的东西，这是正确的方式吗？如果我使用react dom render，它可以显示我想要的东西，这是正确的方式吗？