如何连接从api收到的字符串

Question

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

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;
}

Answer 1

您可以在 api 调用中使用 Array.Map 和 join() 来迭代和展平数组：

  componentDidMount() {
    fetch("https://api.myjson.com/bins/1ep1fh")
      .then(res => res.json())
      .then(result => {
        let texts = result
          .map((el, i) => {
            return el.text;
          })
          .join("");
        let highlights = result
          .map((el, i) => {
            return el.highlight;
          })
          .join("").split(",");
        console.log(highlights);
        this.setState({
          text: texts,
          highlight: highlights
        });
      });
  }

result

Answer 2

您必须遍历您的 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]
}));

Answer 3

用类似的东西替换代码的中心部分应该可以解决它：

fetch("https://api.myjson.com/bins/1ep1fh")
  .then(res => res.json())
  .then(result => {
    let text = '';
    let highlights = [];

    // This will iterate over every entry in your result
    for(const r of result) {
      // The method will be executed for every entry, called r
      text += r.text;
      highlights.push(...r.highlight);
    }

    this.setState({
      text: text,
      highlight: highlights
    });
  });
}

这与@Dyo 的方法非常相似，但应该更高效一些。他创建了整个高亮数组的新副本以及要在每次迭代中添加的条目，而在此示例中，我们使用 Array.push 方法。这只会添加新值，而不复制原始值。