Question

不确定正确的词汇，因此我在搜索时遇到了麻烦。基本上，我发送获取请求

它将为我向下滚动返回选项标签。基本上这样使用axios，

  componentDidMount() {

    axios.get("http://localhost:/8080/api/v1/getstuff"
    )
      .then((response) => {
        this.setState({ stuff: response.data })

      })
      .catch(function (error) {
        console.log(error);

      });

  }

东西现在设置为此：

然后我将其放置在一个选择标签中，但显示为

"<option value='hello'>hello</option>
<option value='hello2'>hello2</option>
<option value='sss'>sss</option>"

而不是

<option value='hello'>hello</option>
<option value='hello2'>hello2</option>
<option value='sss'>sss</option>

做到这一点，所以选项标签不显示。如何解决？

Answer 1

您可以采用两种方法：

第一个是设置父选择标记的内部html。像这样：

<select dangerouslySetInnerHTML={this.state.stuff}></select>

这绝对不是我会推荐的。由于您的api位于localhost上，因此我假设您能够操纵响应？如果是这样，您是否能够获取api以返回对象数组？像这样：

[{
    "value": "hello",
    "text": "hello"
},
{
    "value": "hello2",
    "text": "hello2"
},
{
    "value": "sss",
    "text": "sss"
}]

然后，您可以这样：

<select>
    {this.state.stuff.map((o,i) => <option key={i} value={o.value}>{o.text}</option>)}
</select>

如何将字符串转换为纯HTML？

1 个答案: