FlutterFlow中如何将函数输出作为文本参数传递至下一页？

1. 先修复本地状态崩溃问题 #

你之前用组件本地状态导致崩溃，大概率是在渲染周期内直接调用状态更新函数引发了无限重渲染循环。比如在组件顶层或render里直接执行setState(yourProcessFunction(input))，每次渲染都会触发状态更新，进而再次渲染，最终导致应用崩溃。

正确的做法是把函数调用放在事件处理函数或带明确依赖的useEffect中：

import { useState, useEffect } from 'react';

function TextProcessor() {
  const [inputText, setInputText] = useState('');
  const [processedResult, setProcessedResult] = useState('');

  // 你的文本处理函数
  const processInput = (text) => {
    // 这里替换成你的实际处理逻辑，比如格式转换、内容提取等
    return `处理后：${text.trim().toUpperCase()}`;
  };

  // 仅当输入变化时执行处理，避免无效渲染
  useEffect(() => {
    if (inputText) {
      const result = processInput(inputText);
      setProcessedResult(result);
    }
  }, [inputText]);

  return (
    <div>
      <input 
        value={inputText} 
        onChange={(e) => setInputText(e.target.value)}
        placeholder="输入文本"
      />
      <button onClick={() => { /* 这里添加跳转逻辑 */ }}>跳转到下一页</button>
    </div>
  );
}

2. 跳转传参的具体实现 #

下面以React Router（前端最常用的路由库）为例，给出两种传参方案：

方案一：URL查询参数（适合短文本、允许暴露在URL的内容） #

把处理后的文本通过URL参数传递，下一页直接读取URL参数：

// 原组件添加跳转逻辑
import { useNavigate } from 'react-router-dom';

function TextProcessor() {
  // ... 上面的状态和处理函数
  const navigate = useNavigate();

  const handleJump = () => {
    // 编码特殊字符避免URL解析错误
    const encodedText = encodeURIComponent(processedResult);
    navigate(`/next-page?result=${encodedText}`);
  };

  return (
    <div>
      {/* ... 输入框 */}
      <button onClick={handleJump}>跳转到下一页</button>
    </div>
  );
}

// 下一页组件接收参数
import { useSearchParams } from 'react-router-dom';

function NextPage() {
  const [searchParams] = useSearchParams();
  const receivedResult = searchParams.get('result');

  return <div>接收的处理结果：{receivedResult}</div>;
}

方案二：路由状态（适合长文本、不想暴露在URL的内容） #

利用React Router的state属性传递数据，数据不会出现在URL中：

// 原组件添加跳转逻辑
import { useNavigate } from 'react-router-dom';

function TextProcessor() {
  // ... 上面的状态和处理函数
  const navigate = useNavigate();

  const handleJump = () => {
    navigate('/next-page', { state: { processedText: processedResult } });
  };

  return (
    <div>
      {/* ... 输入框 */}
      <button onClick={handleJump}>跳转到下一页</button>
    </div>
  );
}

// 下一页组件接收参数
import { useLocation } from 'react-router-dom';

function NextPage() {
  const location = useLocation();
  const receivedResult = location.state?.processedText;

  return <div>接收的处理结果：{receivedResult}</div>;
}

方案三：全局状态管理（适合多页面共享数据的复杂场景） #

如果你的应用涉及多个页面共享数据，或者处理后的内容需要长期保存，可以用全局状态工具（比如Zustand、Redux或Context API）：

// 全局状态 store.js
import { create } from 'zustand';

export const useTextStore = create((set) => ({
  processedText: '',
  setProcessedText: (text) => set({ processedText: text }),
}));

// 原组件
import { useTextStore } from './store';
import { useNavigate } from 'react-router-dom';

function TextProcessor() {
  const [inputText, setInputText] = useState('');
  const setProcessedText = useTextStore((state) => state.setProcessedText);
  const navigate = useNavigate();

  const processInput = (text) => {
    return `处理后：${text.trim().toUpperCase()}`;
  };

  const handleJump = () => {
    const result = processInput(inputText);
    setProcessedText(result);
    navigate('/next-page');
  };

  return (
    <div>
      <input value={inputText} onChange={(e) => setInputText(e.target.value)} />
      <button onClick={handleJump}>跳转到下一页</button>
    </div>
  );
}

// 下一页组件
import { useTextStore } from './store';

function NextPage() {
  const processedText = useTextStore((state) => state.processedText);
  return <div>接收的处理结果：{processedText}</div>;
}

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