我遇到了寻找有关我的任务的教程的问题 - 创建音频文件的频谱，以便结果类似于此图像：
其中每个峰值是音频特定部分的平均响度幅度。
首先，我不太清楚这个东西到底叫什么（光谱？）。其次，当我尝试查找教程时，我只在浏览器中找到了实时音频处理。音频播放，声音被解析，dom 元素以某种方式对其做出反应。我需要一些完全不同的东西。我需要一个异步函数来加载轨道，它会用它的算法以某种方式处理它，并在输出时给出一个带有数字的数组，其中每个数字都可以用来构建图片的笔划。加载应用程序时应执行此过程 1 次。
怎么做？
我正在使用具有自定义样式的 React 和 Mui Select。我不明白如何将道具投入这些风格。在此示例中，我将高度参数传递给 MuiSelect 组件，默认为 32px。Select 使用 sx={styles} 参数。我需要在样式对象中插入高度作为变量。怎么做？
import React, { useState } from 'react';
import Select, {SelectChangeEvent} from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
const options = [
{id: '1', value: 'One'},
{id: '2', value: 'Two'},
{id: '3', value: 'Three'},
{id: '4', value: 'Four'},
]
const styles = {
width: '100%',
border: '1px solid #D9D9D9',
borderRadius: '16px',
fontFamily: 'Montserrat',
fontStyle: 'normal',
fontWeight: 700,
fontSize: '14px',
color: '#5E5E5E',
height: '40px',
}
interface IProps {
height?: string;
}
const MuiSelect: React.FC<IProps> = ({height = '32px'}) => {
const [value, setValue] = useState<string>('One');
const handleChange = (e: SelectChangeEvent) => {
setValue(e.target.value);
}
return (
<Select
value={value}
onChange={handleChange}
sx={styles}
>
{
options.map(item =>
<MenuItem
key={item.id}
value={item.value}
>
{item.value}
</MenuItem>)
}
</Select>
);
}
export default MuiSelect;
有一个组件使用自定义输入（CustomInput）并接受一些道具（数据）。我需要在安装组件时立即将道具中的值替换为输入。怎么做？我尝试在defaultValues中输入props中的值，但是没有用。
export const EditPackages = ({action, data}: Props) => {
const { control, handleSubmit, formState:{ errors } } = useForm({
resolver: yupResolver(EditPackagesSchema),
defaultValues: {
price: data.price,
},
});
const onSubmit: SubmitHandler<IEditPackages> = (data: IEditPackages) => {
//...
};
return (
<div className={styles.popup}>
<form
onSubmit={handleSubmit(onSubmit)}
>
<Controller
name="price"
control={control}
render={({ field }) => <CustomInput
placeholder='Price'
value={field.value}
handleChange={field.onChange}
/>}
/>
<DialogButtons
type='submit'
/>
</form>
</div>
);
}
我使用 React + Redux Toolkit + Typescript。
减速器看起来像这样：
import { createSlice } from '@reduxjs/toolkit';
interface IRootState {
test: boolean;
}
const initialState: IRootState = {
test: true,
};
export const mainReducer = createSlice({
name: 'mainReducer',
initialState,
reducers: {
testSwitcher(state) {
state.test = !state.test;
},
},
});
export const { testSwitcher } = mainReducer.actions;
export default mainReducer.reducer;
商店看起来像这样：
const store = configureStore({
reducer: {
main: mainReducer,
},
devTools: process.env.NODE_ENV !== 'production',
});
在组件中导入状态：
const { test } = useSelector((state) => state.main);
结果，typescript 在 state.main 中显示错误：
“DefaultRootState”类型上不存在属性“main”
如何解决？
有一个简单的组件可以接受来自对象数组的道具：
import React from 'react';
import {INavProps} from "../types";
const Nav: React.FC<INavProps[]> = props => {
return (
<nav>
{
props.map((item) => {
return <a key={item.id} href={item.link}>{item.title}</a>
})
}
</nav>
);
};
道具类型如下所示：
export interface INavProps {
id: number,
title: string,
link: string,
}
当您尝试插入组件时，IDE 会自动分配所有原生 JS 数组方法，据说必须输入：
<Nav length={} toString={} toLocaleString={} pop={} push={} concat={} join={} reverse={} shift={} slice={} sort={} splice={} unshift={} indexOf={} lastIndexOf={} every={} some={} forEach={} map={} filter={} reduce={} reduceRight={} find={} findIndex={} fill={} copyWithin={} [Symbol.iterator]={} entries={} keys={} values={} [Symbol.unscopables]={} includes={} flatMap={} flat={}
TS2740：类型'{长度：任意；toString：任意；toLocaleString：任何；流行：任何；推：任何；连接：任何；加入：任何；反向：任何；班次：任何；切片：任何；排序：任何；拼接：任意；不移：任何；indexOf：任何；lastIndexOf：任何；每一个：任何；... 9 更多 ...; 复制范围内：任何；}' 缺少类型 'INavProps[]' 的以下属性：条目、键、值、包含和另外 4 个。
如何正确输入这样的道具？
学习lodash，油门。我决定练习将鼠标坐标输出到控制台。
window.onmousemove = (e) => {
console.log('Мышь X: ' + e.clientX + ' Мышь Y: ' + e.clientY);
};
现在我添加油门，控制台完全停止响应。为什么这段代码不起作用？
window.onmousemove = (e) => {
_.throttle(() => {
console.log('Мышь X: ' + e.clientX + ' Мышь Y: ' + e.clientY);
}, 1000);
};