React ボタンがページにコンポーネントを追加しない

Question

[項目の追加] ボタンをクリックすると、入力フィールドのあるポップアップ フォームがトリガーされるはずですが、フォームがレンダリングされません。ボタンを使用して、レンダリング時に空白のページを表示するだけです。

import './App.css';

const 在庫マネージャー = () => {
  
        ディスパッチ(addItem(newItem));

        //入力フィールドをリセットします
        setItemName('');
        setItemDescription('');
        setItemPrice('');
        setItemImage('');

        // ポップアップフォームを閉じる
        setShowPopup(false);
    };

    const handleClearForm = () => {
        // 入力フィールドをクリアします
        setItemName('');
        setItemDescription('');
        setItemPrice('');
        setItemImage('');
    };

    戻る （
        <div>
            <h1>在庫マネージャー</h1>

            <div id="ボタン">
                <button onClick={() => setShowPopup(true)}>項目を追加</button>
            </div>

            {showPopup && (
                <div id="アイテムポップアップの追加">
                    <div id="ポップアップヘッダー">
                        <h2>アイテムを追加</h2>
                        <button id="close-button" onClick={() => setShowPopup(false)}>
                            バツ
                        </ボタン>
                    </div>
                   
      
                    </フォーム>
                </div>
            )}

            <div id="inventory-gallery">{/* ここに在庫アイテムをレンダリングします */}</div>
        </div>
    );
};

デフォルトの在庫マネージャーをエクスポート;

単一のファイルと異なるコンポーネント ファイルで実装を試みましたが、フォームはまだレンダリングされません。

Answer 1

まず第一に、ファイルの形式が正しくありません。たとえば、15 行目に余分な括弧があります。一方、コード内で関数dispatchやsetItemNameなどの未定義関数を使用しています。フックについては公式の React ドキュメント を読むことをお勧めします。