Javascript-如何从正则表达式而不是[Object]返回字符串

我有一个父窗体组件和一个子组件，用于自动完成文本输入。 我正在将一个名为automptext的对象数组从父组件传递到子组件，该数组具有名称和id字段

//Parent:
const [obj, setObj] = useState([{name:'',id:''}]);
<AutoCompleteText onChange={text => setName(text)} autoCompTxt={obj} name="sampleName" id="sampleId" />

js:22建议：[对象]，[对象]

我尝试过使用JSON.stringify（）和

${v.name}

。但他们没有帮助

问题是下面的行返回了2个对象。{name:“name1”，id:1}，{name:“name2”，id:2}

而不是只返回名字。“名称1”、“名称2”

建议=props.automptext.sort（）.filter（v=>regex.test（v.name））

从“React”导入React；
从“react”导入{useState}；
从“reactstrap”导入{Input}；
const AutoCompleteText=props=>{
const[建议，设置建议]=使用状态（[]）；
const[text，setText]=useState（“”）；
const onTextChanged=（e）=>{
常量值=e.target.value；
让建议=[]；
如果（value.length>0）{
设置建议（[]）；
const regex=new RegExp（`^${value}`，'i'）；
控制台。桌子（道具）；
建议=props.automptext.sort（）.filter（v=>regex.test（v.name））；
console.log（'建议：'+建议）；
}
设置建议（建议）；
setText（值）；
}
功能建议选择（值）{
设置建议（[]）；
道具变更（价值）；
setText（值）；
}
函数renderSuggestions（）{
如果（建议长度===0）{
控制台日志（建议）；
返回null；
}
返回(

{suggestions.map（（item）=>
suggestionSelected（item）}>{item}
）}

)
}
返回(
{renderSuggestions（）}
)
};
导出默认的自动完成文本；

如果过滤后需要字符串数组（v.name），请映射新数组：

suggestions = props.autoCompTxt
              .sort()
              .filter(v => regex.test(v.name))
              .map(v => v.name);

---

问题在于，如果不能将对象直接传递给dom，则只需传递一个值

            <ul>
                {suggestions.map((item) => <li onClick={() =>suggestionSelected(item)} key={item.id}>
                {item.name}
                 </li>)}
            </ul>

{suggestions.map（（item）=>
suggestionSelected（item）}key={item.id}>
{item.name}
）}

详细解释问题，你所做的是正确的，添加AutoCompleteText和Suggestion组件的详细信息以更好地理解问题。我已将完整脚本添加到问题中。我已添加答案

suggestions = props.autoCompTxt
              .sort()
              .filter(v => regex.test(v.name))
              .map(v => v.name);

            <ul>
                {suggestions.map((item) => <li onClick={() =>suggestionSelected(item)} key={item.id}>
                {item.name}
                 </li>)}
            </ul>