Question

我有从api这样获得的一系列对象

[0：{id：1，姓名：“用餐”，餐厅：2} 1：{id：2，名称：“ pick”，餐厅：2}]

现在，我要显示这两个对象的名称，例如 dine,pick 。我能够在这样的div中显示

 {articleopt.ingredient.map(ingred => (
                                <div>{ingred.name + ","}</div>
                              ))}

但是如何将其分配给表单输入字段value = {}？我的输入字段代码是

<div className='col-sm-6'>
                <div className='form-group text-left'>
                  <label htmlFor='' className='small'>
                    Ingredient:
                  </label>
                  <InputField 
                  name='ingredient'
                  value={""}
                  placeholder={"Enter Ingredient comma separated"} />
                </div>
              </div>

Answer 1

假设您有类似的数据，则可以将数组向下映射/连接为一个逗号分隔的字符串。

const data = [{id: 1, name: "dine", restaurant: 2}, {id: 2, name: "pick", restaurant: 2}];
const combined = data.map(el => el.name).join(",");

您可以按以下方式呈现JSX：

<div className='form-group text-left'>
  <InputField value={combined} />
</div>

在表单Reactjs中将多个对象值显示为输入值

1 个答案: