时间戳

首页 > 解决方案 > 无法将 React 组件推送到数组

javascript - 无法将 React 组件推送到数组

问题描述

我有以下课程：

const NewPage = () => {
    const [blocks, setBlocks] = useState(false);
    const [needsShowImageModal, setNeedsShowImageModal] = useState(false);

    const textButtonHandler = () => {
        const key = randomInt(0, 1000000000);
        setBlocks([
            ...blocks, 
            <TextBlock 
                key={key}
                blockKey={key}
                deleteButtonHandler={deleteButtonHandler} 
            />
        ]);
        console.log(blocks);
    };
    return (.....);
}

由于某种原因，第一次textButtonHandler调用它不会将项目添加到数组中。我已经在控制台中检查了数组的长度，它是 0。我在这里做错了什么？

编辑：建议后我现在有：

const NewPage = () => {
    const [blocks, setBlocks] = useState([]);
    const [needsShowImageModal, setNeedsShowImageModal] = useState([]);

    const textButtonHandler = () => {
        const key = randomInt(0, 1000000000);
        setBlocks([
            ...blocks,
            { key, deleteButtonHandler}
        ]);
    };

    const deleteButtonHandler = (blockKey) => {
        console.log(blocks); // Empty
    };

    return (
        <div>
            <ImageModal 
                show={needsShowImageModal}
                onHide={() => setNeedsShowImageModal(false)}
                insertButtonHandler={insertImageHandler}
            />
            <div className="d-flex">
                <NewPageSidebar
                    textButtonHandler={textButtonHandler}
                    imageButtonHandler={imageButtonHandler}
                    spacingButtonHandler={spacingButtonHandler}
                />
                <NewPageContent blocks={blocks} />
            </div>
        </div>
    );
};

export default NewPage;

但是，如果我使用添加一个块textButtonHandler然后触发deleteButtonHandler该数组仍然是空的。

标签： javascriptreactjs

解决方案

1-您应该按名称在数组中添加组件，而不是像 < ../> 那样将其包装起来，并且在 jsx 中使用它时可以这样做，因此您的对象可以是这样的：

{
   key:key,
   deleteButtonHandler:deleteButtonHandler,
   comp:TextBlock
}

2-如果块中的所有对象都具有相同的元素，则不需要元素数组，只有comp信息的对象数组就足够了

3-建议的解决方案：

const NewPage = () => {
    const [blocks, setBlocks] = useState([]);
    const [needsShowImageModal, setNeedsShowImageModal] = useState(false);

    const textButtonHandler = () => {
        const key = randomInt(0, 1000000000);
        setBlocks([
            ...blocks, 
           {
             key:key,
             deleteButtonHandler:deleteButtonHandler
           }
        ]);
        console.log(blocks);
    };
    return (<div> {blocks.map((info)=>(...))} </div>);
}

在上面的代码中创建块列表作为信息持有者后，您可以通过 .map 使用它，例如示例。

推荐阅读