javascript - 通过延迟的字符串数组进行 react 循环并设置文本值

Question

我有一个加载器，它在传递字符串时显示加载消息，但在传递数组时我想通过消息数组循环显示多个消息。

const messages = ['fetching from sources...', 'loading account...'];

<Loader message={messages}/>

const Loader = (Props) => {
    const { message } = props;


    const renderMessages = (msgs) => {

        console.log(msgs);
        return msgs.forEach((msg, i) => {
            setTimeout(() => {
                return <Message>{msg}</Message>;
            }, 500);
        });
    };

    return (
        <LoaderContainer>
            <LoaderSvg width="120" height="120" viewBox="0 0 100 100" />
            {(Array.isArray(message)) ? renderMessages(message) : <Message>{message}</Message>}

        </LoaderContainer>
    );
};

Answer 1

以下是适合您的示例:https://codesandbox.io/s/loop-through-array-with-react-d5tlc (我建议检查它的边缘情况，但核心功能应该接近您正在寻找的功能)。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const messages = ["fetching from sources...", "loading account..."];

const Loader = props => {
  const { messages } = props;
  // Default to the first message passed
  const [messageIndex, setMessageIndex] = React.useState(0);

  React.useEffect(() => {
    // Move on to the next message every `n` milliseconds
    let timeout;
    if (messageIndex < messages.length - 1) {
      timeout = setTimeout(() => setMessageIndex(messageIndex + 1), 1000);
    }

    return () => {
      clearTimeout(timeout);
    };
  }, [messages, messageIndex]);

  return <div>{messages[messageIndex]}</div>;
};

function App() {
  return (
    <div className="App">
      <Loader messages={messages} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);