表单提交后在 JSX 中渲染 const 变量

Question

为了进一步学习和练习 Next.js，我正在尝试制作一个像 Tinyurl 这样缩短长 URL 的网站。但是，我在呈现缩短的 URL 时遇到问题。我正在使用一个表单，在提交该表单时，应该会显示缩短的 URL。 Formik 和 Yup 处理表单数据，studiohyperdrive 的 url-shortener 缩短 URL。有一个名为

result

的对象返回如下输出：

{
  id: "6VYN9",
  original: "https://www.google.com",
  target: "https://short.er/6VYN9"
}

但我不知道如何传递或渲染Home组件中的

target

。当我输入

<a>{result.target}</a>

Next.js 说

result

不存在。

我的代码如下：

export default function Home() {
    const formik = useFormik({
        initialValues: {
            link: "",
        },
        validationSchema: Yup.object({
            link: Yup.string()
                .matches(
                    /((https?):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/,
                    "Please enter a vaild url"
                )
                .required("A URL is required"),
        }),
        onSubmit: (values) => {
            const shortener = new Shortener({
                target: "https://short.ie/",
                alphabet: "alphanumeric",
            });
            // what I'm trying to display:
            const result = shortener.shorten(values.link);
        },
    });
    
    return (
        <div id="container">
            <div className="header-container">
                <h1 id="header">URL Shortie</h1>
            </div>
            <div className="form-container">
                <form onSubmit={formik.handleSubmit}>
                    <label className="label">
                        {formik.touched.link && formik.errors.link ? formik.errors.link : "Your Long URL"}
                    </label>
                    <input
                        className="input"
                        type="url"
                        name="link"
                        value={formik.values.link}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="Enter your link here"
                        required
                    />

                    <p className="label">Shortened URL</p>
                    <div className="input copy">
                        // how I'm trying to display it:
                        {/* <a href={result.original} target="_blank">{result.target}</a> */}
                        <a href="" target="_blank">{}</a>
                    </div>

                    <div className="button-container">
                        <input className="submit-btn" type="submit" value="Shorten Url" />

                        <button className="copy-btn">
                            <span class="material-symbols-outlined">content_copy</span>
                            Copy
                        </button>
                    </div>
                </form>

                <h1 id="subheader">Previous URLs</h1>
                <div className="previous-urls-container"></div>
            </div>
        </div>
    );
}

Answer 1

将结果保留为状态变量。例如

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

然后在您的 submit 处理程序中设置它

setResult(shortener.shorten(values.link));

在你的渲染中

{result && (
  <a href={result.original} target="_blank">{result.target}</a>
)}