reactjs - 无法在打字稿反应js中映射对象

Question

我正在使用对打字稿做出反应，但我无法映射我的对象。我很困惑，所以作为最后一个结果，我问如何解决这个问题

我的代码中的 Object.keys 和以下内容不打印任何控制台日志

import React, { Component, useEffect } from 'react'

export interface FileInputControlIProps {
    id?: string,
    label?: string,
    name?: string,
    value?: any,
    type?: string,
    handleChange: Function,
    attachments?: any,

}

export const FileInputControl = (props: FileInputControlIProps) => {
    const attachmentDetails = (files) => {
        console.log(typeof(files))
        for (const [key, value] of Object.entries(files)) {
            console.log(`${key}: ${value}`);
          }
          
    }
    const { handleChange, type, name, id, attachments, label} = props;
    return (
        <div className="form-group">

            <div className="label-container">
                <label htmlFor="Attachments​&quot; className="form-label">{label}</label>
            </div>
            <div className="control-container">
                <input type={type} name={name} id={id} multiple={true} onChange={(e) => handleChange(e)} />
                <ul className="attachment-file">
                {console.log(attachments)}
                {console.log(attachments === undefined)}
                    {attachments &&
                        attachmentDetails(attachments)
                    }
                </ul>
            </div>
        </div>
    )
}

Answer 1

根据您的需要进行修改，但主要问题是您首先必须遍历文件数组，然后在每个文件中，您应该获取键值。

import React, { Component, useEffect } from 'react'

export interface FileInputControlIProps {
    id?: string,
    label?: string,
    name?: string,
    value?: any,
    type?: string,
    handleChange: Function,
    attachments?: any,

}

export const FileInputControl = (props: FileInputControlIProps) => {
    const attachmentDetails = (files) => {
        files.forEach(file => {
            Object.entries(file).forEach(([key, value]) => {
                console.log(`${key}: ${value}`);
            })
        })
    }
    const { handleChange, type, name, id, attachments, label} = props;
    return (
        <div className="form-group">

            <div className="label-container">
                <label htmlFor="Attachments​&quot; className="form-label">{label}</label>
            </div>
            <div className="control-container">
                <input type={type} name={name} id={id} multiple={true} onChange={(e) => handleChange(e)} />
                <ul className="attachment-file">
                {console.log(attachments)}
                {console.log(attachments === undefined)}
                    {attachments &&
                        attachmentDetails(attachments)
                    }
                </ul>
            </div>
        </div>
    )
}

关于typeof

在下面的例子console.log中，做一个数组给你object，为此我建议第二种方法（Array.isArray）

const array = [1, 2, 3];
console.log(typeof array);
console.log(Array.isArray(array));