如何将React道具数据复制到矩阵中，避免了render（）中setState引起的无限循环

Question

请让我知道如何摆脱下面的例子中的无限循环。我试图将数据集从props复制到制表符矩阵中进行一些修改。

class LoadPhrases extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tab: []
    };
  }

  render() {    

    let i=0;
    phrases = this.props.phrases.map(
      (ph)=>{
        var row = [i++, 0, ph.phrase1, ph.phrase2];
        var joined = this.state.tab.concat(row);
        this.setState({ tab: joined });
        return(
          <p></p>
        );
      }
    );

    return (   
      <div>
        Phrase:
        {this.state.tab[0][2]}
      </div>
    );
  }
}

Answer 1

由于您不使用phrases，您可以：

class LoadPhrases extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tab: []
    };
  }

  componentDidMount() {
    let i=0;
    this.props.phrases.map(ph => {
        var row = [i++, 0, ph.phrase1, ph.phrase2];
        this.setState(prevState => ({ tab: [...prevState.tab.splice(prevState.tab.length, 0, row)] });
      }
    );
  }

  render() {
    return (   
      <div>
        Phrase:
        {this.state.tab.length > 0 && this.state.tab[0].length > 2 && this.state.tab[0][2]}
      </div>
    );
  }
}

Answer 2

看起来你基本上是这样做的：

＆＃13;

＆＃13;

const phrases = [
  {
    phrase1: "phrase_0_1",
    phrase2: "phrase_0_2",
  },
  {
    phrase1: "phrase_1_1",
    phrase2: "phrase_2_2",
  },
  {
    phrase1: "phrase_2_1",
    phrase2: "phrase_2_2",
  },
  {
    phrase1: "phrase_3_1",
    phrase2: "phrase_3_2",
  },
  {
    phrase1: "phrase_4_1",
    phrase2: "phrase_4_2",
  }
]

const LoadPhrases = props => {
  let state = {tab: []};

  props.phrases.map((ph, i) => {
    var row = [i, 0, ph.phrase1, ph.phrase2];
    state = { tab: [...state.tab, row] };
  });
 
  return (   
    <div>
      Phrase:
      {state.tab[0][2]}
    </div>
  );
}

ReactDOM.render(<LoadPhrases phrases={phrases} />, document.getElementById("app"))

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

＆＃13;

＆＃13;

＆＃13;

这意味着我们应该能够使用state.tab[0][2]访问props[0].phrase1，并避免使用任何类型的州或map()。像这样：

＆＃13;

＆＃13;

const phrases = [
  {
    phrase1: "phrase_0_1",
    phrase2: "phrase_0_2",
  },
  {
    phrase1: "phrase_1_1",
    phrase2: "phrase_2_2",
  },
  {
    phrase1: "phrase_2_1",
    phrase2: "phrase_2_2",
  },
  {
    phrase1: "phrase_3_1",
    phrase2: "phrase_3_2",
  },
  {
    phrase1: "phrase_4_1",
    phrase2: "phrase_4_2",
  }
]

const LoadPhrases = props => {
  return (   
    <div>
      Phrase:
      {props.phrases[0].phrase1}
    </div>
  );
}

ReactDOM.render(<LoadPhrases phrases={phrases} />, document.getElementById("app"))

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

＆＃13;

＆＃13;

＆＃13;