Object.keys映射返回对象Object而不是ReactJS中的文本输入表单中的值

Posted 2021-03-27

我试图从一些http地址的JSON数组中获取一些值。因此，当我从输入字段中的地图放入时，我得到了一个Object而不是一个值。在输入字段之外，它工作正常。

    <FormGroup>
         <Label for="description">Description</Label>
         <Input type="text" name="description" id="description" value={Object.keys(item.storeByClothes).map(clothes =>{return <p>{item.storeByClothes[clothes].description}</p>})}
           onChange={this.handleChange} autoComplete="description"/>
    </FormGroup>
{Object.keys(item.storeByClothes).map(clothes =>{return <p>{item.storeByClothes[clothes].description}</p>})}

在<FormGroup>里面，我得到了对象。外在是必要的价值。我究竟做错了什么？

答案

目前JSX转换器将<p>...转换为React组件（对象），然后将其作为input传递给value。要显示变量的内容，浏览器调用.toString()方法。所以最后你会看到“[Object object]”。根据您的需要，您需要进行不同的更改。

假设您希望在输入中看到html标记（如字符串），您应该将其设置为字符串（例如使用模板字符串）：

.map(el => `<p>....`

或者，如果您需要将其视为实时HTML标记，则不应将其放入<input value