Question

以下React组件是一种显示元素数据的表格，无论是游戏还是团队。

在我决定从查询父组件中拆分表格之前，我的组件运行得很好。

这是我的界面：

export interface ShowProps {
  readOnly: boolean
  query: object
  id?: string | number
  match: {
    params: {
      id: string
      elements: string}
    }
}

//team
export interface Elem {
  id: string;
  name?: string;
  [attr: string]: string | number | undefined
}

//game
export interface Elem {
  id: string;
  homeTeamScore?: number
  competition?: string
  round?: string
}

export interface Data {
  elem?: Elem
  [elements: string]: Elem | undefined
}

export interface Variable {
  id?: string | number
}

export interface FormElemProps {
  data: object
  elementName: string
  readOnly: boolean
  listPath: string
}

这很完美（没有TypeScript错误）：

class FormElemQuery extends Query<Data, Variable> {}

const Show = (props: ShowProps) => {
  const id = props.match.params.id
  return (
    <FormElemQuery query={props.query} variables={{ id }}>
    {({ data = {}, error, loading }) => {
      // manage loading
      // manage error
      if (data !== {}  && Object.keys(data).length > 0 ) {
        const elementName = Object.keys(data)[0]
        return (
            <form>
            {
              Object.keys(data[elementName] || {}).map(attr => {
                if (attr !== "id" && attr !== "__typename") {
                  return (
                    <div key={attr} className="form-group">
                      <label htmlFor={`${Object.keys(data)[0]}-${attr}`}>{attr}</label>
                      <input
                        type="text"
                        readOnly={props.readOnly}
                        className="form-control"
                        id={`${Object.keys(data)[0]}-${attr}`}
                        value={data[elementName]![attr] || ""}
                        />
                    </div>
                  )
                }
            }
          )
        }
            </form>
        );
      }
    }}
  </FormElemQuery>
  )
}

export default Show;

但是以下拆分无效：

父组件：

class ShowQuery extends Query<Data, Variable> {}

const Show = (props: ShowProps) => {
  const id = props.match.params.id
  return (
    <ShowQuery query={props.query} variables={{ id }}>
    {({ data = {}, error, loading }) => {
      // loading management
      // error management
      if (data !== {}  && Object.keys(data).length > 0 ) {
        const elementName = Object.keys(data)[0]
        return (
          <FormElem
            data={data}
            elementName={elementName}
            readOnly={props.readOnly}
            listPath={props.match.params.elements}
            />
        );
      }
    }}
    </ShowQuery>
  )
}

export default Show;

表单组件：

const FormElem = (props: FormElemProps) =>  {
  return (
            <form>
            {
              Object.keys(props.data[props.elementName]).map(attr => {
                if (attr !== "id" && attr !== "__typename") {
                  return (
                    <div key={attr} className="form-group">
                      <label htmlFor={`${Object.keys(props.data)[0]}-${attr}`}>{attr}</label>
                      <input
                        type="text"
                        readOnly={props.readOnly}
                        className="form-control"
                        id={`${Object.keys(props.data)[0]}-${attr}`}
                        value={props.data[props.elementName]![attr] || ""}
                        />
                    </div>
                  )
                }
            }
          )
        }
            </form>
        );
}

export default FormElem;

这是我运行此代码时遇到的错误：

TypeScript error: Element implicitly has an 'any' type because type '{}' has no index signature.  TS7017

    16 |             <form>
    17 |             {
  > 18 |               Object.keys(props.data[props.elementName]).map(attr => {
       |                           ^
    19 |                 if (attr !== "id" && attr !== "__typename") {
    20 |                   return (
    21 |                     <div key={attr} className="form-group">

因此在Object.keys中使用道具肯定存在问题（据我所知，Object.keys不可索引）。但是我不知道该怎么办。

有什么想法吗？

Answer 1

当组件未拆分时，我是否正在使用data？拆分时，props.data中的Form是否已使用，我对{{1 }}在data界面中：

FormElemProps

React中的组件拆分会导致TypeScript错误

1 个答案: