関数と変数を使用して条件付きレンダリングを反応させる

受付中プログラミング

2024-12-24

hoge

Reactの関数コンポーネントの変数に格納されているHTML要素のレンダリングを作成しようとしています。この要素は、ユーザーがフォームを使用してデータを送信し、確認メッセージとして機能した後にのみレンダリングする必要があります。したがって、このメッセージを変数に格納するというアイデアがありました。これは、ユーザーがフォームを使用しなかった場合はnullになり（レンダリングされないため）、ユーザーがフォームに入力した場合は段落になります。これを行うには、コンポーネントの状態を更新して再レンダリングする必要があることを理解していますが、何らかの理由で機能させることができません。状態を正常に更新できますが、JSXはその変数に格納されています開発者ツールの[要素]タブでも、まったくレンダリングされていないため、表示されません。これは私のコンポーネント「連絡先」のコードです


        export default function Contacts() 
        {
        
            const [toSend, setToSend] = useState({
                from_name: '',
                to_name: '',
                message: '',
                reply_to: '',
                confirmation: null
            });
        
            const validateAndSend = () =>
            {
                let isValid = true;
                let stop = false;
        
                const elementList = document.querySelectorAll("input"); 
                elementList.forEach( 
                    (e) => {
                        if (e.value === ("") && stop === false)  
                      {
                        alert("You must fill every field of the form!");
                        isValid = false;
                        stop = true;
                      }
                    }
                );
        
                if (isValid === true)
                {
                    send(   
                        'service_id',  
                        'template_id', /
                        toSend,
                        'user_id') 
                    .then( (response) => {
                        console.log("Email sent successfully!", response.status, response.text);
                    })
                    .catch( (err) => {
                        console.log('Error sending email: ', err);
                    });
        
                    const confirmationComponent = (Email sent successfully to website's administrator. You will be contacted at the email address you've just provided.) ;
                    setToSend({ ...toSend, confirmation: { confirmationComponent } });
                };
        
            };
        
            const handleChange = (e) =>
            {
                setToSend({ ...toSend, [e.target.name]: e.target.value })
            };
        
        
            return (
                
                    
                    Contact us!
                    { toSend.confirmation }
                     { event.preventDefault(); } }>
                        
                        
                        
                        
        
                        
                    
                    
                
            );
        }

私はクラスコンポーネントに精通しています。このconfirmationComponentをクラスコンストラクターのクラス変数として宣言して、render（）を含むクラスのすべてのメソッドに対する可視性のスコープを与え、その後、状態を更新します。フォームがユーザーによって送信され、render（）メソッドの戻り値で生成されたコンポーネント（{this.confirmationComponent}と呼ばれる）が表示されます。関数コンポーネントが非常に似ていることは知っていますが、機能させることはできません... また、グローバル関数変数「varconfirmationComponent」を宣言してnullに初期化し、検証後に段落に変更するというアイデアもありました。コンポーネントは、次のように「役に立たない」setStateを実行した後に更新する必要があります。setToSend（{... toSend、confirmation：true}）; したがって、次のようになります。


        export default function Contacts() 
        {
            var confirmationComponent = null;
        
            const [toSend, setToSend] = useState({
                from_name: '',
                to_name: '',
                message: '',
                reply_to: '',
                confirmation: null
            });
        
            const validateAndSend = () =>
            {
                let isValid = true;
                let stop = false;
        
                const elementList = document.querySelectorAll("input"); 
                elementList.forEach(  /* Controllo se sono stati compilati tutti i campi del form */
                    (e) => {
                        if (e.value === ("") && stop === false)  
                      {
                        alert("You must fill every field of the form!");
                        isValid = false;
                        stop = true;
                      }
                    }
                );
        
                if (isValid === true)
                {
                    send(   
                        'service_ID',  
                        'template_ID', 
                        toSend,
                        'user_ID') 
                    .then( (response) => {
                        console.log("Email sent successfully!", response.status, response.text);
                    })
                    .catch( (err) => {
                        console.log('Error sending email: ', err);
                    });
        
                    confirmationComponent = (Email sent successfully to website's administrator. You will be contacted at the email address you've just provided.) ;
                    setToSend({ ...toSend, confirmation: true });
                };
        
            };
        
            const handleChange = (e) =>
            {
                setToSend({ ...toSend, [e.target.name]: e.target.value })
            };
        
        
            return (
                
                    
                    Contact us!
                    { confirmationComponent }
                     { event.preventDefault(); } }>
                        
                        
                        
                        
        
                        
                    
                    
                
            );
        }

残念ながら、このソリューションはどちらも機能せず、その段落はレンダリングされません。ただし、電子メールは正常に送信され、変数confirmationComponentへの割り当ても同様に行われます。

回答一覧

レンダリングされない理由は次のように思われます。コンポーネント名の最初の文字は大文字にする必要があります。ソースhttps://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized 試してみてください：


        const Confirmation = toSend.confirmation;

最初のメソッドの直前returnで、JSX形式で記述してリターンブロックにレンダリングします。

hoge

ログインして回答する