Question

我正在尝试创建一个if，else if条件，该条件将显示用户创建的所有视频，否则它将返回一条语句，通知用户他们尚未创建任何视频。但是，我在“ else if”语句上有条件工作的前半部分，但我收到一条错误消息，指出代码期望“;”。这就是我所拥有的。

import React, { useEffect } from "react";
import { connect } from "react-redux";
import { Link, useParams, withRouter } from "react-router-dom";
import { Container } from "reactstrap";
import { getUserVideos } from "../store/actions";

const UserPage = props => {
  const { username } = useParams();

  useEffect(() => {
    props.getUserVideos(localStorage.getItem("token"), username);
  }, [username]);

  let greeting;
  const getAllUserVideos = getUserVideos.length !== 0 ? true : false;

  if (localStorage.getItem("username") === username) {
    greeting = `Welcome ${username}`;
    console.log("Welcome");
  } else {
    greeting = `${username} Videos`;
    console.log(username);
  }

  if (getAllUserVideos)
    return (
      <Container>
        <div>
          <h1>{greeting}</h1>
          {props.userVideos.map(video => {
            return (
              <div Key={video.id}>
                <h1>{video.video_title}</h1>
                <div>{video.location}</div>
              </div>
            );
          })}
        </div>
      </Container>
    ) else if (!getAllUserVideos)
    return (
      <>
        <Container>
          <h1>{greeting}</h1>
          <p>
            Looks like you haven't created any videos yet, lets{""}
            <Link to="/create">create some videos!</Link>
          </p>
        </Container>
      </>
    );
};

const mapStateToProps = state => ({
  userVideos: state.userVideos,
  getUserVideosStart: state.getUserVideosStart,
  getUserVideosSuccess: state.getUserVideosSuccess,
  getUserVideosError: state.getUserVideosError
});

export default connect(
  mapStateToProps,
  { getUserVideos }
)(withRouter(UserPage));

我将条件重构为此

const UserPage = props => {
  const { username } = useParams();

  useEffect(() => {
    props.getUserVideos(localStorage.getItem("token"), username);
  }, [username]);

  let greeting;

  if (localStorage.getItem("username") === username) {
    greeting = `Welcome ${username}`;
    console.log("Welcome");
  } else {
    greeting = `${username} Videos`;
    console.log(username);
  }
  //this if statement will greet a user with a list of their videos, otherwise it will send a prompt to create a video

  return (
    <>
      <Container>
        <h1>{greeting}</h1>
        <div style={videoListContainer}>
          <div style={VideoThumbsContainer}>
            {props.userVideos && props.userVideos ? (
              props.userVideos.map(video => {
                return (
                  <div key={video.id}>
                    <h3>{video.video_title}</h3>
                    <Link to={`/videos/${video.id}`}>
                      <Thumbnail video={video} />
                    </Link>
                  </div>
                );
              })
            ) : (
                <p>
                  Looks like you haven't created any videos yet, lets {""}
                  <Link to="/create">create some videos!</Link>
                </p>
            )}
          </div>
        </div>
      </Container>
    </>
  );
};

const mapStateToProps = state => ({
  userVideos: state.userVideos,
  getUserVideosStart: state.getUserVideosStart,
  getUserVideosSuccess: state.getUserVideosSuccess,
  getUserVideosError: state.getUserVideosError
});

export default connect(
  mapStateToProps,
  { getUserVideos }
)(withRouter(UserPage));

但是，如果用户没有任何视频，则不会返回段落声明。我想念什么？

Answer 1

1）您应该尝试在{..}语句上添加if/else/。

2）无需使用else if。可以简化else，也可以省去它，因为您已经对if语句进行了早期返回：

if (getAllUserVideos) {
  return (
    <Container>
      <div>
        <h1>{greeting}</h1>
        {props.userVideos.map(video => {
          return (
            <div Key={video.id}>
              <h1>{video.video_title}</h1>
              <div>{video.location}</div>
            </div>
          );
        })}
      </div>
    </Container>
  );
}
return (
  <>
    <Container>
      <h1>{greeting}</h1>
      <p>
        Looks like you haven't created any videos yet, lets{""}
        <Link to="/create">create some videos!</Link>
      </p>
    </Container>
  </>
);

Answer 2

我什至没有else块

if (getAllUserVideos) {
    return (
      <Container>
        <div>
          <h1>{greeting}</h1>
          {props.userVideos.map(video => {
            return (
              <div Key={video.id}>
                <h1>{video.video_title}</h1>
                <div>{video.location}</div>
              </div>
            );
          })}
        </div>
      </Container>
    );
}

return (
  <>
     <Container>
       <h1>{greeting}</h1>
       <p>
         Looks like you haven't created any videos yet, lets{""}
         <Link to="/create">create some videos!</Link>
       </p>
     </Container>
  </>
);

一些重构

const getAllUserVideos = getUserVideos.length !== 0 ? true : false;可以写为const getAllUserVideos = getUserVideos.length !== 0;

卡住尝试创建if ... else if条件

2 个答案: