Question

在动态路由中接收到参数后，我将查询数据库以返回结果，并发现控制台报告错误。

TypeError：无法读取null的属性“ title”

当我去查看请求时，我发现第一个请求返回了数据，然后发送了相同的请求，但拼接参数为null，并报告了错误。

这是第二个请求304

这是我的页面代码。 `

 <templat>
  <div class="wrapper qa-content">
    <div class="qa-title">
      <div class="fl title">
        <h2>{{problem.title}}</h2>
        <p>
          <span
          >{{labes(index)}}</span>
          <span>{{timeago(problem.createtime)}}</span>
        </p>
      </div>
import "~/assets/css/page-sj-qa-detail.css";
import axios from "axios";
import problemApi from "@/api/problem";
import replyApi from "@/api/reply";
import labelApi from "@/api/label";
export default {
  asyncData({ params }) {
    return axios
      .all([
        problemApi.findById(params.id),
        replyApi.findByProId(params.id),
        problemApi.findPL(params.id)
      ])
      .then(
        axios.spread(function(pojo, replyList, labelList) {
          return {
            problemId: params.id,
            replyList: replyList.data.data,
            problem: pojo.data.data,
            labelList: labelList.data.data
          };
        })
      );
  },
  data() {
    return {
      CurrentreplyId: "",
      commentList: [],
      labelName: [],
      textarea: "",
      dialogVisible: false,
      content: "",
      editorOption: {
        // some quill options
        modules: {
          toolbar: [
            [{ size: ["small", false, "large"] }],
            ["bold", "italic"],
            [{ list: "ordered" }, { list: "bullet" }],
            ["link", "image"],
            ["blockquote", "code-block"]
          ]
        }
      }
    };
  },
  mounted() {
    console.log("app init, my quill insrance object is:", this.myQuillEditor);
  },
  methods: {

    labes(index) {
      console.log(this.labelList);
       labelApi.findOne(this.labelList[index].labelid).then(res => {
        this.labelName.push(res.data.data.labelname);
        console.log(this.labelName);
      });
    },
     check(id) {
      console.log(id);
       replyApi.findByParentid(id).then(res => {
        this.commentList = res.data.data;
      });
    },
    shows(item) {
      console.log(item.id);
      if (item.content === null || item.content === "" || item.content === "") {
        return false;
      } else {
        return true;
      }
    }

`

此页面是从上一页动态路由的。

<nuxt-link :to="'/qa/items/'+item.id" target="_blank">{{item.title}}</nuxt-link>

Answer 1

好的。我认为有帮助。如果我对您的理解正确，请执行以下操作：

您在上一页
您点击路径中带有项目ID的nuxt链接
您的新路线加载了，您会收到一条错误消息：因为您的页面两次从API提取数据（但您没有重新加载页面）是正确的吗？

如果是这样，我不确定为什么您的asyncData被执行两次，但是您可能可以这样解决：

asyncData({ params }) {
if (params.id) {
    return axios
  .all([...
}

这将确保仅在存在ID且不会发送null的情况下发出您的请求。

老实说，我不知道为什么重新发送请求...

我也不太了解您的API的外观。我看到它以某种方式返回了promise，并且您可以在其上调用方法...在这种情况下我还没有看到过，但是可以：）。

除了您似乎在方法中执行其他API调用之外。也许是问题所在： <span>{{labes(index)}}</span> 我看不到将传递给此方法的内容。该索引未定义... 何时致电

labes()（您是说labels吗？）方法，执行 labelApi.findOne(this.labelList[index].labelid) 但是由于索引未定义，我认为this.labelList[index]将不会返回有用的内容，而您在那儿提出了请求？

（取决于您的api.findOne()方法的作用。可能是它本身向实际的远程API发送了一个请求？）

欢呼

使用nuxt.js动态路由来传递参数

1 个答案: