javascript - 如何连接从api接收的字符串

我想突出显示“文本”元素句子中“突出显示”元素中的单词。我可以成功突出显示一个句子，但是无法将两个或多个句子连接在一起。我只能显示一个句子，并用代码将其突出显示：

this.setState({
  text: result[0].text,
  highlight: result[0].highlight,
});

但是一次不超过一句话。我想用高亮显示的单词动态连接api中的所有句子。我尝试将状态设置为text: result[].text和highlight: result[].highlight，但这给了我错误。正如您在this sandbox中看到的那样，只有当您执行result[0].text或result[1].text时，您才能得到不同的结果，但是我想动态地将api中的所有句子连接起来，假设将来我还会有更多的句子。

react代码如下所示：

import React, { Component } from "react";
import { render } from "react-dom";

import "./App.css";

const stripChars = word => word.replace(/[\W_]+/g, "");

class App extends Component {
  state = {
    text: "The gun is a dangerous weapon, don't kill anyone",
    highlight: ["gun", "kill"]
    // text: "",
    // highlight: []
  };

  componentDidMount() {
    fetch("https://api.myjson.com/bins/1ep1fh")
      .then(res => res.json())
      .then(result => {
        console.log(result);
        this.setState({
          text: result[0].text,
          highlight: result[0].highlight
        });
      });
  }
  render() {
    const { text, highlight } = this.state;
    const words = text.split(" ");
    return (
      <div>
        {words.map((word, i) => (
          <span key={i}>
            <span
              className={highlight.includes(stripChars(word)) && "highlight"}
            >
              {word}
            </span>
            &nbsp;
          </span>
        ))}
      </div>
    );
  }
}

export default App;

CSS文件：

.highlight{
  background: red;
}

最佳答案

您必须遍历api结果才能将它们连接起来：

  componentDidMount() {
    fetch("https://api.myjson.com/bins/1ep1fh")
      .then(res => res.json())
      .then(result => {
        console.log(result);
        let text = "";
        let highlight = [];
        for (const item of result) {
          text += item.text + '\n';
          highlight = [...highlight, ...item.highlight];
        }
        this.setState({
          text,
          highlight
        });
      });
  }

编辑：一些代码说明


  highlight = [...highlight, ...item.highlight];


是的，这是这里的数组扩展运算符，用于创建一个带有所有单词突出显示的单个数组。 （对于每次循环迭代，它都会在循环中散布实际项目亮点中的所有单词，并散布旧单词）；

您也可以这样：

for (const word of item.highlight) {
  highlight.push(word);
}

  let text = "";
   let highlight = [];


这只是变量init，它们是新的，我可以用不同的名称命名（我应该将它们命名为concatenatedTexts和concatenatedHighlights以避免混淆）

是的，状态已删除，如果您也想保留初始状态并将其连接起来，则可以这样更改setState：

this.setState(prevState => ({
  text: prevState.text + "\n" + text,
  highlight: [...prevState.highlight, ...highlight]
}));

关于javascript - 如何连接从api接收的字符串，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57866874/