Question

我正在将NextJs与Typescript一起使用。

仅当我添加“ any”关键字时，我的代码才能正确呈现，否则它会给我post._id，post.title和post.body错误。

问题：displayblog的具体类型是什么，因此我不将其设置为任何类型？另外，如何为下面的代码定义状态和道具？

function dateToString(date: Date): string {
  return (
    `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}` +
    ` ${date.getHours()}-${date.getMinutes()}-${date.getSeconds()}`
  );
}

export default class LA extends React.Component {
  state = {
    title: "",

  };

  componentDidMount = () => {
    this.Post();
  };

  getBlogPost = () => {
    axios
      .get("/api")
      .then(({ data }) => {
        const reverseData = new Array();


      .catch(error => {
        alert("Error: ERROR");
      });
  };


    return posts.map((post, index) => (
      <div key={index}>
        <Card>
          <Title>
            {" "}


          </Title>
          {/* <p>{blog.date}</p>
                  <p>{blog.name}</p> */}
          <FullName>{`${blog.name} | ${dateToString(
            currentDateTime
          )}`}</FullName>
          <Line />
          <Question>{blog.body}</Question>
        </Card>
      </div>
    ));
  };
  render() {
    return (
      <div>
        <Container>
          <Headers />
          <div className="blog">{this.displayBlogPost(this.state.posts)}</div>
        </Container>
      </div>
    );
  }
}

这是我要更改为特定类型的行。

displayBlogPost =（帖子：数组<任何>）=> {

Answer 1

假设基于所讨论的代码的 posts 数组，创建一个名为“ Post”的界面。

为道具和状态创建单独的接口，并根据您的格式进行定义。在这种情况下，posts是一个数组，因此我先定义了一个接口，然后在状态中使用它。同样，如果您有任何道具，也请为其定义格式并使用它。另外，不要忘记在扩展类时一起使用它们。

interface Post {
  name: string;
  body: string;
  title: string;
  _id: number | string;
}

interface PostState {
  posts: Post[];
}

//Define based on your need
interface PostProps {}

export default class PostList extends React.Component<PostProps, PostState> {
  state = {
    posts: []
  };

  componentDidMount = () => {
    this.getBlogPost();
  };

  getBlogPost = () => {
    axios
      .get("/api")
      .then(({ data }) => {
        const reverseData = new Array();
        for (let datetime = data.length - 1; datetime >= 0; datetime--) {
          reverseData.push(data[datetime]);
        }
        this.setState({ posts: reverseData });
      })
      .catch(error => {
        alert("Error: there was an error processing your request");
      });
  };

  displayBlogPost = (posts: Post[]) => {
    const currentDateTime = new Date();
    if (!posts.length) return null;

    return posts.map((post, index) => (
      <div key={index}>
        <Card>
          <Title>
            {" "}
            <Link href={`/post?_id=${post._id}`}>
              <a>{post.title}</a>
            </Link>
          </Title>
          {/* <p>{post.date}</p>
                        <p>{post.name}</p> */}
          <FullName>{`${post.name} | ${dateToString(
            currentDateTime
          )}`}</FullName>
          <Line />
          <Question>{post.body}</Question>
        </Card>
      </div>
    ));
  };

  render() {
    return (
      <div>
        <Container>
          <Headers />
          <div className="blog">{this.displayBlogPost(this.state.posts)}</div>
        </Container>
      </div>
    );
  }
}

在打字稿中指定类型

1 个答案: