通过setState设置键值对的变量

Question

这里我定义了一个变量，

data

const [data, setData] = useState({
        files: [],
        processed_files: Number,
        URL: String,
    });

记录

data

工作正常：

(3) [{…}, {…}, {…}]
0: {files: Array(2)}
1: {processed_files: 0}
2: {url: 'f179d744-cdfb-4546-b756-afb6d5daaeff'}
length:3
[[Prototype]]:Array(0)

我尝试以这种方式使用

setData

：

socket.on("send_data", function (...response: any) {
        setData(response)
    });

但进一步记录字典中的键表明它是

undefined

：

useEffect(() => {
        console.log(data); //this works fine (image uploaded)
        console.log(data.files); //undefined
        console.log(data.processed_files); //undefined
        console.log(data.url); //undefined
    }, [data]);

然后我尝试这个，但它会导致错误

socket.on("send_data", function (...response: any) {
        setData({files : response[0], processed_files : 0 as Number, URL : "" as String});
    });

“Number”类型缺少“NumberConstructor”类型中的以下属性：prototype、MAX_VALUE、MIN_VALUE、NaN 以及其他 11 个属性。 ts(2740)

“String”类型缺少“StringConstructor”类型中的以下属性：prototype、fromCharCode、fromCodePoint、raw ts(2739)

我该怎么办？

Answer 1

使用 原始类型 (

string

,

number

) 而不是内置类型 (

String

,

Number

)。

此外，您应该在

useState

中定义类型，如下所示：

const [data, setData] = useState<{
   files: [];
   processed_files: number;
   URL: string;
} | null>(null);

socket.on("send_data", function (...response: any) {
    setData({ files: response[0], processed_files: 0, URL: "" });
});

Answer 2

我发现了问题，我使用界面解决了它

interface serverData{
    files: Array<string>,
    processed_files: number,
    URL: string
}

const [data, setData] = useState<serverData>({
        files: [],
        processed_files: 0,
        URL: "",
    });

修复了控制台日志显示未定义的问题，如下所示：

socket.on("send_data", function (...response: any) {
        setData({files : response[0]['files'], processed_files: response[1]['processed_files'] , URL : response[2]['url'] });
    });

我还应该提到我是如何获取数据的（mb）

    socketio.emit('send_data', ({"files": files}, {"processed_files": processed_files}, {"url": url}))