标签: react-state-management

我有一个数组，如：

"data": {
    "key1": {
        "key_val1": "data1",
        "key_val2": "data2",
        "key_val3": "data3",
        "key_val4": "data4",

    },
    "key2": {
        "key_val1": "data1",
        "key_val2": "data2",
        "key_val3": "data3",
        "key_val4": "data4",

    },
    "key3": {
        "key_val1": "data1",
        "key_val2": "data2",
        "key_val3": "data3",
        "key_val4": "data4",

    }
}

我想用这个数组迭代并填充我的表，但我收到错误this.state.data.map() is not a function。

这是我的反应组件：

import React, { Component } from "react";
import $ from "jquery";
import axios from "axios";

class DataComponent extends Component {
  state = {
    data: [],
    isLoading: true
  };
  componentDidMount() {
    this.getData();
  }

  getData() {
    var …

我对如何使用钩子（或无状态组件）从子组件引发事件感到困惑。也许是我想太多了。或者还不够！我构建了一个简单的示例来说明我的困惑。

假设我们有一个带有一些数据的父组件

import React, { useState } from "react";
import ReactDOM from "react-dom";

const Parent = () => {
  const data = [
    {
      thing: 1,
      info: "this is thing 1"
    },
    {
      thing: 2,
      info: "this is thing 1"
    },
    {
      thing: 3,
      info: "this is thing 3"
    }
  ];

  function handleClick(item) {
    console.log(item);
  }

  return (
    <div> 
    <h1> This is the Parent </h1> 
    <Child data={data} onShowClick={handleClick} /> 
    </div>
  )
};

以及通过数据映射创建的子组件

const Child = (data, {onShowClick}) => { …

例如，我们有一个这样定义的状态，它有一些待办事项，如果这些待办事项完成，我们希望更改该待办事项的完成状态

this.state = {
  // store an array of todo objects
  todos: [
    { task: 'do the dishes', done: false, id: 1 },
    { task: 'vacuum the floor', done: true, id: 2 }
  ]
};

为此，我们可以这样做。

  const theTodo = this.state.todos.find(t => t.id === id);
  theTodo.done = true; // NOOOOO

  this.setState({
    todos: this.state.todos
  });

}

但我有点困惑的是，数组上的 find 方法将返回与其中条件匹配的元素，并将其存储在不同的变量中，然后访问 did 将其更改为 true。但是，我们仍然没有更改原始状态值，因为这是一个副本。

那我们怎么用这个来保存呢？

 this.setState({
    todos: this.state.todos // bad
  });

我是 React 的新手，我了解 Functional 和 Class 组件以及 Hooks 的概念，例如 useEffect 和 useState；因此，我在将这些知识转化为实践时遇到了麻烦，因为我正在研究以下 React 组件，该组件生成一个普通的 Javascript API 调用，我现在想使用 State 和 Hooks 将其转换为“真正的”React API 调用。

我的问题如下：我想呈现 API 返回的员工对象，从员工的名字和姓氏开始，然后是其他信息。

以纯 Javascript 形式对 API 的请求运行良好并返回所需的数据；因此，我不确定根据定义将状态设置为什么（0？假？别的什么？这取决于什么，我怎么知道？）。

这是代码：

import React, {useEffect, useState} from 'react';
import { Link } from "react-router-dom";
import {
    Container,
    Row,
    Col,
    Card,
    CardBody,
    Table,
    Button, Alert, Modal, ModalHeader, ModalBody
} from "reactstrap";


const ContactsList = (props) => {

        let request = new XMLHttpRequest()

        // Open a new connection, using the GET request …

考虑以下 zustand 商店：

const useStore = ((set) => ({
   property1: 2,
   property2: 3,
   property3: 6,
   //etc.
}))

其中属性 3 是属性 1 和属性 2 的倍数。是否可以将其设置为当 zustand 中的 property1 或 property2 更新时 property3 自动更新？

I have a table like this:

When a user clicks on an Edit button, an <input> should appear in its place.

If a user clicks on another Edit button, this one will also be replaced with an <input>, and the previous <input> should disappear and show an Edit button again.

In short, only one field can be in edit mode at a time.

This is my initial state:

state = {
    editnameEnable: false,
    editemailEnable: false,
    editaddressEnable: false,
    edittelephone_noEnable: …

我如何动态地将数组的名称设置为state，以便从state中获取它。

onCheckBoxItemClickList(e, value, path) {
    console.log(e.target.checked)
    if (e.target.checked) {
        //append to array
        this.setState({
            [path]: this.state.[path].concat([value])
        })
    } else {
        //remove from array
        this.setState({
            [path]: this.state.[path].filter(function (val) {
                return val !== value
            })
        })
    }
}

我知道如何动态设置和获取状态键，但是当我尝试执行时

[path]: this.state.[path].concat([value])

我收到以下错误：

任何帮助将不胜感激，谢谢

目标：

我正在尝试通过 websocket 连接从服务器获取消息，并将它们添加到名为 的对象数组中outgoingMessages。

问题：

调用outgoingMessages时仅保存最新消息。receive()

我怀疑会发生这种情况，因为仅使用我致电时Websocket.onmessage的值。我已经尝试摆弄它很多次，但我无法解决这个问题。outgoingMessagesconnect()

我怎样才能receive()使用当前状态，而不是初始状态？

提前致谢。

const Dashboard = () => {
  const [incomingMessages, setIncomingMessages] = React.useState([]);
  const ws = React.useRef(null);

  const receive = (message) => {
    setIncomingMessages([...incomingMessages, message]);
  };

  const connect = () => {
    ws.current = new WebSocket(WS_URL + "mqtt/ws/messages");
    ws.current.onopen = () => setWsConnected(true);
    ws.current.onclose = () => setWsConnected(false);
    ws.current.onmessage = (event) => receive(event);
  };

  return (<>Stuff</>)
}

我最近阅读了以下文章State Management with React Hooks \xe2\x80\x94 No Redux or Context API。自 Reacts 诞生以来，最受关注的问题始终是状态管理和全局状态。Redux 一直是流行的选择，最近又成为上下文 API。但这种方法似乎更简单，代码更少并且更具可扩展性。

我的问题是，任何人都可以看到使用我可能忽略的这种类型的状态管理方法的缺点。我对代码进行了一些调整以支持 SSR，它可以在 Nextjs 中运行，并且还使其使用操作和状态变量的设置更加友好。

useGlobalState.js

import React, { useState, useEffect, useLayoutEffect } from \'react\';\n\nconst effect = typeof window === \'undefined\' ? useEffect : useLayoutEffect;\n\nfunction setState(newState) {\n    if (newState === this.state) return;\n    this.state = newState;\n    this.listeners.forEach((listener) => {\n        listener(this.state);\n    });\n}\n\nfunction useCustom() {\n    const newListener = useState()[1];\n    effect(() => {\n        this.listeners.push(newListener);\n        return () => {\n            this.listeners = this.listeners.filter((listener) => listener !== newListener);\n …

我正在学习反应。我的代码应该做什么：它应该根据相应行中的星星值来渲染方块。线条具有从 1 到 5 的数字，方块具有从 1 到 5 的星号。如果方块的星号值为 3，则它应该以相同的数字渲染。如果更改星星值，方块应在不同的行中渲染。

下面是我的代码。

import react from "react";
import { useState } from "react";

const squares = [
    {'id': 1, 'stars': '5'},
    {'id': 2, 'stars': '4'},
    {'id': 3, 'stars': '3'},
    {'id': 4, 'stars': '3'},
    {'id': 5, 'stars': '5'},
    {'id': 6, 'stars': '4'},
    {'id': 7, 'stars': '2'},
    {'id': 8, 'stars': '1'}
]

const lines = [
    {'id': 1, 'numberName':'One','number': 1},
    {'id': 2, 'numberName':'One','number': 2},
    {'id': 3, 'numberName':'One','number': 3},
    {'id': 4, 'numberName':'One','number': 4},
    {'id': 5, …