时间戳

首页 > 解决方案 > 在另一个函数中创建一个函数来改变状态

reactjs - 在另一个函数中创建一个函数来改变状态

问题描述

我是 React 的新手，想知道我是否有一个简单的语法错误，或者我是否以错误的方式处理这个问题（以 vanilla js 的方式）。我正在尝试创建一个函数（在另一个函数内部 - 在next()函数内部，称为updateCurrentStatus），它可以更新一个简单的对象数组（Reviews），以便“下一个”对象的属性“当前”更改为“真”和其他对象''current' 属性更改为 false。

查看reviews.json 可能更有意义：

[
    {
      "name": "Peter Lahm",
      "comment": "Was ok. Quis nostrud exercitation ullamco laboris nisi.",
      "rating": 3.5,
      "date": "29 December 2019",
      "init": false,
      "current": false
    },
    {
      "name": "Simon Arnold",
      "comment": "Nice - quis nostrud exercitation ullamco laboris nisi.",
      "rating": 4,
      "date": "29 December 2019",
      "init": true,
      "current": true
    },
    {
      "name": "Claire Pullen",
      "comment": "Great - quis nostrud exercitation ullamco laboris nisi.",
      "rating": 4.5,
      "date": "29 December 2019",
      "init": false,
      "current": false
    }
]

默认情况下，“Simon Arnold”评论是“当前”评论，因此为了显示下一个评论，我希望“Claire Pullen”评论将当前属性更改为 true，其他属性为 false - 所以我编写了这个函数：

next() {
    console.log("next() execution start");

    for (let i = 0; i < Reviews.length; i++) { // 1. go through each review
      let review = Reviews[i];

      if (review["current"] && i < Reviews.length - 1) { // 2. if current one AND not last one
        updateCurrentStatus(Reviews[i + 1]); // 3. make the next review true & the rest false
      } else {
        updateCurrentStatus(Reviews[0]); // 4. else make the first review true & the rest false
      }

      function updateCurrentStatus(obj) {
        Reviews.forEach(function(rev) {
          if (obj == rev) {
            obj.current == true;
          } else {
            obj.current == false;
          }
        }
      }
    }

    console.log("next() execution end");
  }

但是，我收到了这个错误，我不知道为什么，显然是在行function updateCurrentStatus(obj) {：

Error in index.js (54:7)
',' expected.

有谁知道如何解决这一问题？

为了获得更多可见性，这是​​索引代码的其余部分：

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";
import "./fontawesome.min.css";
import ReviewsLeftArea from "./ReviewsLeftArea";
import ReviewsRightArea from "./ReviewsRightArea";
import AllReviews from "./AllReviews";
import Reviews from "./reviews.json";

class App extends Component {
  constructor() {
    super();
    this.state = {
      reviews: Reviews,
      avgRating: (
        Reviews.reduce((total, cur) => total + cur.rating, 0) / Reviews.length
      ).toFixed(1),
      totalReviews: Reviews.length,
      initialReview: Reviews.find(({ init }) => init === true),
      currentReview: Reviews.find(({ current }) => current === true)
    };
  }

  componentWillMount() {
    Reviews.forEach(function(review) {
      if (review.init) {
        review["current"] = true;
      } else {
        review["current"] = false;
      }
    });
  }

  next() {
    console.log("next() execution start");

    for (let i = 0; i < Reviews.length; i++) { // 1. go through each review
      let review = Reviews[i];

      if (review["current"] && i < Reviews.length - 1) { // 2. if current one AND not last one
        updateCurrentStatus(Reviews[i + 1]); // 3. make the next review true & the rest false
      } else {
        updateCurrentStatus(Reviews[0]); // 4. else make the first review true & the rest false
      }

      function updateCurrentStatus(obj) {
        Reviews.forEach(function(rev) {
          if (obj == rev) {
            obj.current == true;
          } else {
            obj.current == false;
          }
        }
      }
    }

    console.log("next() execution end");
  }

  render() {
    return (
      <div id="reviews-area-wrap">
        <div id="reviews-area-inner">
          <ReviewsLeftArea
            totalReviews={this.state.totalReviews}
            avgRating={this.state.avgRating}
          />
          <ReviewsRightArea currentReview={this.state.currentReview} />
        </div>
        <AllReviews
          currentReview={this.state.currentReview}
          reviews={this.state.reviews}
        />
        {setTimeout(this.next, 3000)}
      </div>
    );
  }
}

render(<App />, document.getElementById("root-cont"));

仅供参考，默认情况下，“当前”属性实际上都是 null 并由componentWillMount. 我希望我已经清楚地解释了这一点。谢谢你的帮助。

标签： reactjs

解决方案

forEach 方法中缺少右括号。

Reviews.forEach(function(rev) {
      if (obj == rev) {
        obj.current = true;
      } else {
        obj.current = false;
      }
})

对于初学者，这个函数声明可以作为函数表达式移出 for 循环。像这样

const updateCurrentStatus = (obj) => {
        Reviews.forEach(function(rev) {
          if (obj == rev) {
            obj.current = true;
          } else {
            obj.current = false;
          }
        })
}
for (let i = 0; i < Reviews.length; i++) {
    ...
}

推荐阅读