我是 React 的新手，我正在努力了解如何以正确的方式做事。所以我有一个导航栏，它根据用户是否登录显示不同的链接。如果用户登录，我会设置一个 cookie loggedIn=true。比在我的 Navbar 组件中，我使用以下命令检查这些 cookie window.setInterval：

import React, { Component } from 'react'
import { NavLink, Link } from "react-router-dom"
import styles from './Navbar.module.css'

class Navbar extends Component {
  constructor() {
    super()

    this.state = {
      loggedIn: false
    }
  }

  componentDidMount() {
    if (document.cookie.split(';').filter((item) => item.trim().startsWith('logedIn=')).length) {
      this.setState({ loggedIn: true })
    }
    window.setInterval(() => {
      if (document.cookie.split(';').filter((item) => item.trim().startsWith('logedIn=')).length) {
        this.setState({ loggedIn: true })
      }
      else {
        this.setState({ loggedIn: false })
      }
    }, 500)
  }

  render() …

我正在使用 React Hooks 和 useEffect 从 API 获取数据。我需要连续拨打 2 个电话。如果我直接 console.log 响应，它会显示正确的响应，但是当我 console.log 状态时，它是空的并且不更新。我究竟做错了什么？

const [describeFields, setDescribeFields] = useState([]);

useEffect(() => {
const fetchData = async () => {
  await axios
    .all([
      axios.get("someUrl"),
      axios.get("someotherUrl")
    ])
    .then(
      axios.spread((result1, result2) => {
        console.log(result1.data.result.fields); //shows correct response
        setDescribeFields(result1.data.result.fields);
        console.log(describeFields);  //shows empty array      
      })
    );
};
fetchData();
}, []);

我正在使用material-table组件，该组件填充了来自Redux（对象数组）的动态数据，但是随后我在组件状态内对该数据进行了其他处理。要创建列下拉过滤器，每列选项数组中都有一个元素，该元素lookup接收一个对象并根据其值创建下拉列表。我正在从数据中提取一些项目，并将它们放入处于组件状态的元素中。这是一个对象，与lookup收到。事实是该组件显示一个空的下拉菜单，就像对象是空的一样，但不是。我将其登录到控制台，并且该对象充满了我需要的数据。我最初以为是一个渲染问题，对象在开始时是空的，然后填充了数据，但是组件每次都渲染（是的，React是反应性的）。这只是帮助我解决此问题的代码：

表组件

import React, { Component } from "react";
import MaterialTable from "material-table";

class CustomTable extends Component {
  state = {
    column1: "",
    column2: "",
    column3: "",
    column1FilterList: {}
    columns: [
      {
        title: "Column1",
        field: "column1",
        editable: "onAdd",
        filtering: true,
        lookup: { ...this.column1FilterList }
      },
      {
        title: "Column2",
        field: "column2",
        editable: "onAdd",
        filtering: true,
      },
      {
        title: "Column3",
        field: "column3",
        editable: "onAdd",
        filtering: true
      }
    ]
  };

  componentDidMount() {
    this.props.fetchValues()
    this.props.fetchApplications()
    this.filterColumn1ExistingKeys()
  }

  filterColumn1ExistingKeys …

下面我有一个对象数组

var data = [{
  "time": "1572024707.4763825",
  "rssi": "32",
  "id": "77777"
}, {
  "time": "1572024709.0991757",
  "rssi": "32",
  "id": "77777"
}, {
  "time": "1572024704.4570136",
  "rssi": "32",
  "id": "555555"
}, {
  "time": "1572024708.3903246",
  "rssi": "32",
  "id": "77777"
}, {
  "time": "1572024699.7132683",
  "rssi": "32",
  "id": "66666"
}]

如何重组它以删除最旧的重复ID

我试图从数组中提取所有唯一ID，以便可以遍历数据数组，但是代码开始变得太长。

  data.forEach(item => {

    IDs.push(item.id);
  });

  var unqIDs = [...new Set(IDs)];
  console.log(unqIDs);

输出应如下所示

outPutShouldBe = [{
  "time": "1572024699.7132683",
  "rssi": "32",
  "id": "66666"
},{
  "time": "1572024709.0991757",
  "rssi": "32",
  "id": "77777"
},  {"time": "1572024704.4570136",
  "rssi": "32",
  "id": …