如何将空数组放入模板字符串

Question

我想创建一个函数来为我生成一些反应代码

这是我的函数，它接受一个对象并为我创建一堆 useState() 挂钩

var fromStateToHook = (obj) => {
    return Object.entries(obj).reduce((acc, [key,value]) => {
        return [...acc, [`const [${key}, 
        set${key.slice(0,1).toUpperCase() + key.slice(1)}] = useState('${value}');`]];
    }, []).join("\n")
}

当我这样使用它时

copy(fromStateToHook( {
    images: [],
}))

我回来了

const [images, setImages] = useState('');

我想改用这个

const [images, setImages] = useState([]);

有什么办法可以把数组放到模板字符串中吗？

Answer 1

您可以使用 JSON.stringify:

set${key.slice(0,1).toUpperCase() + key.slice(1)}] = useState(${JSON.stringify(value)});`]];

这实际上取决于您希望如何打印值（转换为文本）。如果您的需求更复杂，您将不得不为该值提出一个自定义的字符串化机制。

Answer 2

数组需要 "stringified" 按照您希望的方式编写。假设它是一个一维数组，Array.join 会做

const numbers = [1, 2, 3, 4];
const template = `useState([${numbers.join(',')}])`
console.log(template); // useState([1,2,3,4])

Answer 3

您确定您真的需要为此生成代码吗？您也可以创建自己的挂钩：

  function useStates(obj) {
    const result = {};
    for(const [key, value] of Object.entries(obj)) {
      const [stored, setter] = useState(value);
      result[key] = stored;
      result["set" + key[0].toUpperCase() + key.slice(1)] = setter;
    }
   return result;
 }

 const { images, setImages, names, setNames } = useStates({ images: [], names: [] });

如何将空数组放入模板字符串

How to put an empty array into a template string

javascript

reactjs

react-hooks