Question

我有2个包含一些单词的数组（array1和array2）。 2个数组被循环，并且在每次迭代时，将React组件“句子”（道具是每个数组中的一个单词）推送到状态数组“句子”中。数组的前5个元素显示在浏览器上。

var array1 = ["hello", "some", "words", "house", "garden", "car"];
var array2 = ["other", "bag", "of", "words", "oh", "yeah"];

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sentences: []
    };
  }

  componentDidMount() {
    let sentences = this.state.sentences.slice();
    for (var i = 0; i < array1.length; i++) {
      for (var j = 0; j < array2.length; j++) {
        sentences.push(<Sentence word1={array1[i]} word2={array2[j]} />);
      }
    }
    this.setState({ sentences: sentences });
  }

  shuffle = () => {
    let temp = this.state.sentences.slice();

    for (let i = temp.length - 1; i > 0; i--) {
      let j = Math.floor(Math.random() * (i + 1));
      [temp[i], temp[j]] = [temp[j], temp[i]];
    }
    this.setState({ sentences: temp });
  };

  render() {
    return (
      <div>
        {this.state.sentences[0]}
        {this.state.sentences[1]}
        {this.state.sentences[2]}
        {this.state.sentences[3]}
        {this.state.sentences[4]}

        <Button variant="primary" onClick={this.shuffle}>
          Shuffle
        </Button>
      </div>
    );
  }
}

和Sentence.js

class Sentence extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      word1: this.props.word1,
      word2: this.props.word2
    };
  }

  render() {
    return (
      <div>
        First word: {this.state.word1}
        <br />
        Second word: {this.state.word2}
        <br />
        <br />
      </div>
    );
  }

}

问题：在对数组进行混排时，浏览器中显示的“句子”顺序不会改变。

（改组算法来自this stackoverflow post）

Answer 1

尝试此代码。我建议您始终尝试仅在Components方法内部使用Component.render，并对渲染方法内部的数组使用Array.map而不是引用每个子级。

希望这会有所帮助，祝你有美好的一天！

const array1 = ["hello", "some", "words", "house", "garden", "car"];
const array2 = ["other", "bag", "of", "words", "oh", "yeah"];

class Sentence extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      word1: this.props.word1,
      word2: this.props.word2
    };
  }

  render() {
    return (
      <div>
        First word: {this.state.word1}
        <br />
        Second word: {this.state.word2}
        <br />
        <br />
      </div>
    );
  }
 }
 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sentences: []
    };
  }

  componentDidMount() {
    let sentences = this.state.sentences.slice();
    for (let i = 0; i < array1.length; i++) {
      for (let j = 0; j < array2.length; j++) {
        sentences.push({word1: array1[i], word2: array2[j], key: `sentence_i1${i}_j${j}`});
      }
    }
    this.setState({ sentences: sentences });
  }

  shuffle = () => {
    let temp = this.state.sentences.slice();

    for (let i = temp.length - 1; i > 0; i--) {
      let j = Math.floor(Math.random() * (i + 1));
      [temp[i], temp[j]] = [temp[j], temp[i]];
    }
    this.setState({ sentences: temp });
  };

  render() {
    return (
      <div>
        {this.state.sentences.map(props => <Sentence word1={props.word1} word2={props.word2} key={props.key} />)}

        <button variant="primary" onClick={this.shuffle}>
          Shuffle
        </button>
      </div>
    );
  }
}
    
ReactDOM.render(<App />, document.getElementById('app'));

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>React.js -- Shuffle demo</title>
</head>
<body>
  <div id="app"></div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
</body>
</html>

改组包含React组件的React状态数组

1 个答案: