时间戳

首页 > 解决方案 > Formik InitialValue 由变量或状态设置

reactjs - Formik InitialValue 由变量或状态设置

问题描述

我正在做一个项目，我必须使用 formik 和 react-select 创建一些机构关系对象。这些对象分别接收两个特定的属性，status_id 和 status_text，但它们是链接的，当使用 react-select 库选择它们时，它们会被传递，status_id 作为值，status_text 作为标签。

但在 POST 和 GET 请求中，仅返回 status_id，我需要 status_text，以便在查看或编辑关系数据时向用户显示他们拥有的状态。我试图发出一个 get 请求，然后过滤数据以仅根据其 ID 显示 status_text，使用此函数：

  const [statusText, setStatusText] = useState();

  const getStatusText = useCallback(async (id) => {
    const response = await getStatus();
    // eslint-disable-next-line array-callback-return
    const option = response.filter((t) => {
      if (id === t.value) return t.label;
    });
    const text = option[0].label;
    setStatusText(text);
    console.log(statusText);
  }, [statusText]);

  useEffect(() => {
    getStatusText(relation.status_id);
  }, [relation.status_id, getStatusText]);

其中relation.status_id是Id，getStatus()是获取所有状态的服务，statusText是状态。此函数按预期工作，例如 console.log(statusText) 返回我需要的确切文本。但我无法将它与 formik initialValues 一起使用。我正在尝试这样：

const initialValues = {
    selectedStatus: relation.status_id ? {
      value: relation.status_id || '',
      label: statusText || '',
    } : [],
  };

SelectedStatus 是我用于 react-select 组件的变量，并且这个 relation.status_id 来自上一页的一个道具，关系包含来自关系对象的所有数据。由于 react-select 适用于标签和值，因此我将其值设置为 status_id 并尝试将标签设置为我之前填写的 statusText 状态，但 formik 无法识别它。有没有办法将变量或状态传递给 formiks initialValues？

标签： reactjsstateformikreact-select

解决方案

更新：它只是缺少 Formik 组件上的 enableReinitialize

推荐阅读