React: Muuri-react generate random items error - Uncaught Invariant: Invariant failed: 该项目尚未设置答案

【问题标题】：React: Muuri-react generate random items error - Uncaught Invariant: Invariant failed: The item has not been setted yetReact: Muuri-react generate random items error - Uncaught Invariant: Invariant failed: 该项目尚未设置
【发布时间】：2020-09-28 04:07:09
【问题描述】：

muuri-react 演示生成和添加随机项。

对代码进行了小幅修改，以随机生成 3 个项目，而不是添加 3 个随机项目。当我在 codepen 中修改并运行它时，这些项目可以成功呈现。但是，当我在本地机器上尝试时，它不能。

当我点击“Generate item”按钮时，div上什么也没有出现，第二次点击后，控制台上显示错误消息“Uncaught Invariant: Invariant failed: The item has not be set yet at 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```

【问题讨论】：

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

标签： reactjs

【解决方案1】：

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

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

【讨论】：