React中如何使用map函数将对象值逐个填入渲染的text field

错误原因 #

直接将整个多语言对象myObject绑定到输入框value属性时，JS会自动将对象转为字符串，就会输出[object Object]。

修复方法 #

你遍历locals生成对应语言的输入框，只需要用locals当前项的语言标识作为key，从myObject中取出对应文案赋值给value即可，根据你的locals结构分为两种场景：

场景1：locals数组元素直接是语言码 #

比如locals = ['en', 'fr', 'ja']，修改CssTextField的value属性如下：

const basicDetails = (item, index, myObject) => {
    return (
        <Grid>
             <Grid item xs={12}>
                    <CssTextField
                        value={myObject[item]}
                        autoFocus
                        fullWidth
                        variant="outlined"
                        label={`Shop Tagline (${item})`}
                    />
              </Grid>
    );
};

场景2：locals数组元素是包含语言码的对象 #

比如locals = [{lang: 'en', langName: '英语'}, {lang: 'fr', langName: '法语'}]，用对象上存语言码的属性取对应值即可：

value={myObject[item.lang]}

优化建议 #

可以加兜底逻辑避免出现对应语言不存在时的undefined显示问题：

value={myObject[item] ?? '暂无对应语言文案'}

内容的提问来源于stack exchange，提问作者Zenixo