typescript - TypeScript 中的 useState 和 useContext

Question

使用 useState，我想创建一个对象，我将在（可能很远的 ^^）未来继续获取该对象。

代码是作为一个表单，将在几个子页面上，每个子页面为对象提供不同的数据，这些数据最终会被读取到数据库中。

从理论上讲，我能够结合 useState 和 useContext，不幸的是我得到了错误

类型“{}”必须有一个返回 iterator.ts (2488) 的“[Symbol.iterator] ()”方法

formContext.ts

import React, { useState, createContext } from 'react';

export const FormContext = createContext({});

export const FormProvider: React.FC = props => {
  const [formData, setFormData] = useState({ title: '' });
  return <FormContext.Provider value={[formData, setFormData]}>{props.children}</FormContext.Provider>;
};

服务框生成器.ts

import React, { useContext } from 'react';

//Component Import
import { ServiceBox } from './ServiceBox/ServiceBox';
import { ProcedureBox } from './ProcedureBox/ProcedureBox';
//Context Import
import { ServiceContext } from '../../App';
import { FormContext } from '../../utils/formContext';

export const ServiceBoxesGenerator: React.FC = () => {
  const { data } = useContext(ServiceContext);
  const dataArray = data;
  const [formData, setFormData] = useContext(FormContext);
  if (formData.title) {
    const searchedObject = dataArray.find(x => x.title === formData.title);
    const procedureObject = searchedObject?.services;
    return (
      <>
        {procedureObject?.map(data => {
          return <ProcedureBox key={data.id} icon={data.icon} title={data.title} description={data.description} price={data.price} />;
        })}
      </>
    );
  }
  return (
    <>
      {dataArray.map(data => {
        return (
          <div
            key={data.id}
            onClick={() => {
              setFormData({ title: data.title });
            }}
          >
            <ServiceBox key={data.id} icon={data.icon} title={data.title} serviceAmount={data.amount} />
          </div>
        );
      })}
    </>
  );
};

我正在寻求帮助并提示我做错了什么，因为我不知道我可以改变什么来让它工作。

或者也许有人有另一种方法来创建这样的对象，我不坚持使用 useState 和 useContext。

非常感谢您的所有帮助，祝您有美好的一天；）

标签： typescriptformsuse-statetslintuse-context

Answer 1

That's because the type of {} in createContext({}) does not match the type of [formData, setFormData].

The easy way to remove this error is to specify the type of context like that:

export const FormContext = createContext<[{ title: string },React.Dispatch<React.SetStateAction<{
  title: string;
}>>]>({} as any);