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

需要按照您期望的方式对数组进行“字符串化”。假设它是一维数组，Array.join会做到

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

Answer 2

您可能会使用JSON.stringify：

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

这实际上取决于您要如何打印值（转换为文本）。如果您的需求更加复杂，则必须针对该值提出一个自定义字符串化机制。

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: [] });

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

3 个答案: