Next.js表单提交后如何在JSX中渲染缩短后的URL

核心问题分析 #

你遇到的报错本质是**result变量未初始化或未正确更新状态**，导致渲染时访问result.target时result为undefined。以下是具体修复步骤和代码示例：

修复步骤 #

1. 初始化组件状态 #

在Home组件中用useState初始化result状态，初始值设为null或空对象，避免未定义的情况：

const [result, setResult] = useState(null);

2. 正确处理异步表单提交 #

生成短链接是异步操作，必须用async/await确保拿到结果后再更新状态，避免状态更新不及时：

const handleSubmit = async (values) => {
  try {
    // 等待短链接生成结果
    const shortenedResult = await shortener.generate(values.url);
    // 将结果存入组件状态
    setResult(shortenedResult);
    // 可打印结果确认结构是否包含target字段
    console.log('生成结果:', shortenedResult);
  } catch (error) {
    console.error('生成失败:', error);
  }
};

3. 条件渲染避免报错 #

渲染result.target前必须判断result是否存在，防止初始状态或请求未完成时访问不存在的属性：

{result && (
  <div className="short-link-result">
    <p>生成的短链接：</p>
    <a href={result.target} target="_blank" rel="noopener noreferrer">
      {result.target}
    </a>
  </div>
)}

完整示例代码 #

import { useState } from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';
import { shortener } from '@studiohyperdrive/shortener';

export default function Home() {
  const [result, setResult] = useState(null);

  // Yup表单验证规则
  const urlValidationSchema = Yup.object({
    url: Yup.string()
      .url('请输入有效的URL地址')
      .required('URL不能为空'),
  });

  const handleFormSubmit = async (values) => {
    try {
      const shortenedData = await shortener.generate(values.url);
      setResult(shortenedData);
    } catch (err) {
      alert('短链接生成失败，请重试');
      console.error(err);
    }
  };

  return (
    <div className="container">
      <h1>URL短链接生成器</h1>
      <Formik
        initialValues={{ url: '' }}
        validationSchema={urlValidationSchema}
        onSubmit={handleFormSubmit}
      >
        {({ errors, touched }) => (
          <Form className="url-form">
            <Field
              name="url"
              type="url"
              placeholder="输入需要缩短的URL"
              className={`input-field ${errors.url && touched.url ? 'error' : ''}`}
            />
            {errors.url && touched.url && (
              <span className="error-message">{errors.url}</span>
            )}
            <button type="submit" className="submit-btn">生成短链接</button>
          </Form>
        )}
      </Formik>

      {/* 条件渲染结果 */}
      {result && (
        <div className="result-card">
          <h3>生成成功！</h3>
          <a 
            href={result.target} 
            target="_blank" 
            rel="noopener noreferrer"
            className="short-link"
          >
            {result.target}
          </a>
        </div>
      )}
    </div>
  );
}

额外排查点 #

• 确认@studiohyperdrive/shortener返回的结果确实包含target字段，可在handleFormSubmit中console.log(shortenedData)查看结构。
• 检查Formik的onSubmit是否正确绑定了处理函数，避免出现未触发状态更新的情况。

内容的提问来源于stack exchange，提问作者user16052347