Question

我有以下反应代码：

{myArray.map(arr => { 
    return ( <MyComponent title={arr.ttile} /> ) 
})}

我想在 map（）未完全完成时调用正在加载组件。有可能这样做吗？如果可以，我该怎么办？

Answer 1

如果您要从API获取数据，则可能需要照常渲染数据，但可以改为在componentDidMount钩子中获取数据，例如保持状态isLoading的其他状态，您可以在render方法中使用它来决定是否应显示加载组件。

示例

function getBooks() {
  return new Promise(resolve => {
    setTimeout(() => resolve([{ title: "foo" }, { title: "bar" }]), 1000);
  });
}

function MyComponent(props) {
  return <div> {props.title} </div>;
}

class App extends React.Component {
  state = { books: [], isLoading: true };

  componentDidMount() {
    getBooks().then(books => {
      this.setState({ books, isLoading: false });
    });
  }

  render() {
    const { isLoading, books } = this.state;

    if (isLoading) {
      return <div> Loading... </div>;
    }

    return (
      <div>
        {this.state.books.map(book => <MyComponent title={book.title} />)}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<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="root"></div>

Answer 2

如果您想真正能够查看要在加载指示器后面/下方加载的组件，则将比此提议的解决方案更具挑战性，并且可能需要做更多的工作。但是，如果您只想在.map()原型函数运行时显示加载指示器，那么我相信这可以达到目的：

constructor(props) {
    super(props);
    this.state = { loadingIndicator : null };
}

getArrayOfMyComponents() {
    return myArray.map((arr, index) => {
        if (index === 0) {
            const loadingIndicator = <Loading/>;
            this.setState({ loadingIndicator : loadingIndicator });
        } else if (index === myArray.length - 1) {
            this.setState({ loadingIndicator : null });
        }
        return ( <MyComponent title={arr.title} /> );
    });
}

render() {
    const arrayOfMyComponents = this.getArrayOfMyComponents();
    return (
        <div>
            {this.state.loadingIndicator}
            {arrayOfMyComponents}
        </div>
    );
}

Array.prototype.map（）实际上只是Array.prototype.forEach（）的一个高级版本。因此，我们可以利用这一事实在第一个迭代中启动加载指示器的显示，并在最后一个迭代中将其删除。

Answer 3

您可以在状态中使用布尔值，在开始数组映射之前，将boolean设置为true并运行另一个代码或组件渲染，然后在数组映射结束时将该状态设置为false，以使用状态获取开始进行redux im ，提取，提取，然后您可以控制情况

在array.map（）运行时调用另一个代码

3 个答案: