标签: react-state-management

我正在使用 React 构建一个应用程序，其中两个组件应该能够更改彼此的状态：

组件 A -> 组件 B

组件 B -> 组件 A

组件 A 是一组按钮，组件 B 是一个输入元素。

我设法让它只以一种方式工作，A -> B 或只是 B -> A，但不能让它同时工作。它可以部分使用 useEffect 钩子，但有错误，我认为这确实是愚蠢的想法。

我读过很多关于 React 不能以这种方式工作的文章，但是有什么迂回方式可以使其工作吗？我的应用程序确实需要这种 2 路数据绑定。

谢谢你的帮助！

按钮的状态位于自定义上下文挂钩 (useStateContext) 中的数字变量中，作为数组。

import { useStateContext } from "components/StateProvider/Context"; 
import { useState, useEffect } from "react";

import { baseConvert } from "utility/baseConvert";

const NumberInput = () => {

  const [ { digits, baseIn, baseOut }, dispatch ] = useStateContext();

  const convertedValue = baseConvert({
    digits,
    baseIn, …

在父 React 组件中创建状态对象并使用 useContext 在嵌套组件之间上下传递数据有什么缺点吗？这会消除对道具的需求吗？似乎是一种更简单、更合乎逻辑的数据组织方式。此方法是否有任何性能或其他问题？

因此，在我需要开发前端部分的大型应用程序中工作。我们希望它是用于 SEO 目的的 SSR，但是当涉及到状态管理时，我们有 redux，那么我们将如何管理它以及服务器端和客户端配置应该是什么？如果可能的话，也分享例子。我们可以在 next.js 中定义像 react-router 这样的客户端路由吗？

我正在开发一个反应本机应用程序，在添加持久中间件后我收到以下警告。

[zustand persist middleware] 无法更新项目“todos”，给定的存储当前不可用。

这是代码。

import {devtools, persist} from 'zustand/middleware';

const todosStore = set => ({
  todos: [],
  addTodo: todo =>
    set(state => {
      return ({todos: [todo, ...state.todos]});
    }),
});

const useStore = create(
  devtools(
    persist(todosStore, {
      name: 'todos',
      getStorage: () => storage,
    }),
  ),
);

export default useStore;

我有一个反应组件，用户可以在其中上传图像，并且他还显示了上传图像的预览。他可以通过单击图像对应的删除按钮来删除图像。我正在使用 react-dropzone 。这是代码：

class UploadImage extends React.Component {
  constructor(props) {
    super(props);
    this.onDrop = this.onDrop.bind(this);
    this.deleteImage = this.deleteImage.bind(this);
    this.state = {
      filesToBeSent: [],
      filesPreview: [],
      printCount: 10,
    };
  }

  onDrop(acceptedFiles, rejectedFiles) {
    const filesToBeSent = this.state.filesToBeSent;
    if (filesToBeSent.length < this.state.printCount) {
      this.setState(prevState => ({
        filesToBeSent: prevState.filesToBeSent.concat([{acceptedFiles}])
      }));
      console.log(filesToBeSent.length);
      for (var i in filesToBeSent) {
        console.log(filesToBeSent[i]);
        this.setState(prevState => ({
          filesPreview: prevState.filesPreview.concat([
            <div>
              <img src={filesToBeSent[i][0]}/>
              <Button variant="fab" aria-label="Delete" onClick={(e) => this.deleteImage(e,i)}>
                <DeleteIcon/>
              </Button>
            </div>
          ])
        }));
      }
    } else {
      alert("you have reached …

我正在制作一个指导我部分.本指南的部分内容 - 显示一系列流程.每个进程内都有一个步骤数组,每个步骤中都有一个选项数组.用户从其中一个步骤中选择一个选项,将它们带到下一个相关步骤.如果用户在步骤2中选择了该选项,则可以将它们带到步骤3或返回步骤1.这取决于id.

尽管如此,我的过程中有一些问题在改变我.我正在使用React Context作为全局状态.当用户选择一个选项时,我抓住那个id,然后通过该id过滤指定的对象.所以我只能留下具有该特定步骤的流程.发生的事情是我最初的全球状态正以某种方式发生变异.我在这里错过了一些东西,因为我是React的新手.

Ps - 我现在没有使用任何服务,所以我只是将一些JSON复制到context.js中的初始状态

context.js

import React, { Component } from 'react'
// import axios from 'axios'

const Context = React.createContext()
const reducer = (state, action) => {
    switch(action.type){
        case 'SEARCH_PROCESS':
        return {
            ...state,
            guides: action.payload
        }
        default:
        return state
    }
}

export class Provider extends Component {

    state = {
        guides: [
            {
                "processName": "Support Messaging",
                "steps": [{
                    "id": "15869594739302",
                    "title": "step one", 
                    "options": [{
                        "nextStep": "4767fn-47587n-2819am-9585j,04956840987", 
                        "text": "Option 1 text", 
                        "type": "option"
                      },
                      { …

我正在尝试更新包含多个级别的状态对象。请参阅此示例https://codesandbox.io/s/oq9kp9vy5y。

问题是，render 方法中的值不会更新……只有第一个。我可以强制更新还是有更好的方法？

谢谢卡斯帕

setState返回从钩子获取的（已更改的）先前状态useState似乎不会改变状态。运行以下直接代码片段

function App(){
  const [state, setState] = React.useState([{x: 0}])
  function changeCount(){
    setState(prevState => {
      console.log('before', prevState[0])
      const newState = [...prevState]
      newState[0].x += 1 //the shallow copy newState could potentially change state
      console.log('after', prevState[0])//here x gets bigger as expected
      return prevState //instead of newState we return the changed prevState
    })
  }
  //checking state shows that x remained 0
  return <div className='square' onClick={changeCount}>{state[0].x}</div>
}
ReactDOM.render(<App/>, document.getElementById('root'))

.square{
  width: 100px;
  height: 100px;
  background: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div …

我已经看到一些 React 应用程序useImmer用作钩子而不是useState. 我不明白什么useImmer提供了useState没有。

使用useImmer与使用官方相比有什么优势useState？