Javascript 对嵌套对象进行React REDUCT和replace

我将数据从JSON映射到React组件，其中JSON中的部分字符串被上下文中的值替换。这对于只有一个级别的JSON非常有效

这是有效的：

/* JSON */
const data = {
  "content":[
    "#number# Tips to Get #goal#",
    "Your Search For #goal# Ends Here"
  ]
}

const parameters = useContext(ParameterContext)
  const {
    audience,
    goal,
    number
  } = parameters;

const content = data.content;

const listItems = content.map(
  (result, index) => 
  <li key={index}>{Object.keys(parameters).reduce((res, key) => 
    res.replace(`#${key}#`, parameters[key]), result)}</li>
);

...

return (
  <ul>
    {listItems}
  </ul>
)

尝试分析会导致

类型错误：res.replace不是函数

。现在，我怀疑这是因为目标文本字符串现在位于另一个数组中，但我不知道如何在我的

map（）

函数中访问它们

---

如何修复

map（）

函数以读取更新JSON格式的文本字符串？

使用reduce在数组中累加li元素。使用对象键的值修改文本特性

const obj={
“内容”：[{
“文本”：“#数字#获取#目标#的技巧”，
“类型”：[“电子邮件”]
},
{
“文本”：“您对#目标#的搜索到此结束”，
“类型”：[“广告”、“电子邮件”]
}
]
}
常数参数={
观众：“观众1”，
目标：“目标1”，
编号：“编号1”
}
常量键=对象键（参数）
const listItems=obj.content.reduce（（acc，x，i）=>{
keys.forEach（key=>{
x、 text=x.text.replace（`${key}}`，参数[key]）
})
acc.push（`
${x.text}
`）；
返回acc；
}, []);
console.log（listItems）

这应该可以工作

    const listItems = content.map((result, index) => (
    <li key={index}>
        {Object.keys(parameters).reduce((res, key) => {
            return res.replace(`#${key}#`, parameters[key]);
        }, result.text)} //result -> result.text
    </li>
));

const listItems=content.map（（结果、索引）=>(

{Object.keys（parameters）.reduce（（res，key）=>{
返回res.replace（`${key}`，参数[key]）；
}，result.text）}//result->result.text

));

要访问对象内部的文本，可以使用destructuring

const listItems = content.map(({ text }, index) => (
  <li key={index}>
    {Object.keys(parameters).reduce(
      (res, key) => res.replace(`#${key}#`, parameters[key]),
      text
    )}
  </li>
))

const listItems=content.map（{text}，index）=>(

{Object.keys（参数）。减少(
（res，key）=>res.replace（`${key}`，参数[key]），
文本
)}

))

专用菜单：对象={
“内容”：[
{
“文本”：“#数字#获取#目标#的技巧”，
“类型”：[“电子邮件”]
},
{
“文本”：“您对#目标#的搜索到此结束”，
“类型”：[“广告”、“电子邮件”]
}
]
};
public buildMenu（）：void
{
让html:string='
'；
this.menu.forEach（（menuItems）=>html+=buildMenuSubMenu（menuItem））；
html+='
'
}
私有构建菜单usubmenu（menuItem）：字符串
{
让html:string=null；
html+=`
`；
if（菜单项长度）
{
html+='
'；
forEach（（child）=>html+=buildMenuSubMenu（child））；
html+='
'；
}
html+=“
”；
返回html；
}

const listItems = content.map(({ text }, index) => (
  <li key={index}>
    {Object.keys(parameters).reduce(
      (res, key) => res.replace(`#${key}#`, parameters[key]),
      text
    )}
  </li>
))

private menu: Object = {
  "content": [
    {
      "text" : "#number# Tips to Get #goal#",
      "types" : [ "email"]
    },
    {
      "text" : "Your Search For #goal# Ends Here",
      "types" : [ "ad", "email" ]
    }
  ]
};

public buildMenu():void
{
    let html: string  = '<ul>';
    this.menu.forEach( (menuItems) => html += buildMenuSubMenu(menuItem) );
    html += '</ul>'
}

private buildMenuSubMenu(menuItem): string
{
    let html: string = null;

    html += `<li><a href='${menuItem[types][0]}'>${menuItem[text]}</a>`;

    if (menuItem.lenght)
    {
        html += '<ul>';
        menuItem.forEach( (child) => html += buildMenuSubMenu(child) );
        html += '</ul>';
    }

    html += '<li>';

    return html;
}