时间戳

首页 > 解决方案 > 如何映射此状态的连接值，而不将其作为字符串传递？

javascript - 如何映射此状态的连接值，而不将其作为字符串传递？

问题描述

我是 Javascript 的新手。

我正在构建这个鼓垫，我希望能够在不同的声音包之间切换。

声音是从一个单独的文件中导入的，状态是这样写的：

import * as Sample from '../audiofiles/soundfiles'

    const drumpadData = [
        {
            // other stuff
            soundfile: Sample.sound1a
        },

如果我想加载不同的声音包，我必须更改状态，以便更改最后一个字母 (a,b,c)，因此必须是 Sample.sound1a，而不是 Sample.sound1a。这是我写的函数（在 App.js 上）：

changeSamples(id) {
    let choice = document.getElementById("select-samplepack").value
    this.setState(prevState => {
        const updatedData = prevState.data.map(item => {
            let newSoundfile = "Sample.sound" + item.id + choice
            item.soundfile = newSoundfile
            return item
        })
        return {
            data: updatedData
        }
    })
}

它可以工作，因为值发生了变化，但不是做出反应来解释它并找到正确的导入，soundfile 的值只是保持为像“Sample.soundb1”这样的字符串，所以我得到了大量的媒体资源错误。

https://aquiab.github.io/drumpad/这里是网站，你可以检查控制台查看错误，你必须加载不同的声音包来重现错误。

https://github.com/aquiab/drumpad这里是文件：

我想了一些方法来解决它，但我希望代码尽可能保持干净。

标签： javascriptreactjs

解决方案

我可以在这里想到两种方法。

  1. 在 App.jsx 中导入示例。并更新声音文件。

 import * as Sample from '../audiofiles/soundfiles'
       
       changeSamples(id) {
        let choice = document.getElementById("select-samplepack").value
        this.setState(prevState => {
            const updatedData = prevState.data.map(item => {
                let newSoundfile = Sample[`sound${item.id}${choice}`]
                item.soundfile = newSoundfile
                return item
            })
            return {
                data: updatedData
            }
        })
    }

  1. 您应该将文件映射保存在其他对象中，并更新映射并在鼓垫数据声音文件键中使用映射。

推荐阅读