标签: state

我有以下设置：

this.state = {
  values: {
    id: null,
    name: "",
    unitName: "",
    unitCategory: ""
  }
};

当我更改表单中字段中的值时，我具有以下handleChange功能：

this.setState({
  values: {
    [e.target.name]: e.target.value
  }
});

问题是 - 这会从values我的状态中的对象中删除所有其他值，只留下正在修改的值（即<input name="name" />）。

我怎样才能保留所有其他价值观？

编辑 代码现在看起来像：

this.setState(prevState => {
  console.log(prevState.values);
  return {
    values: {
      ...prevState.values,
      [e.target.name]: e.target.value
    }
  };
});

回报console.log(prevState.values)：

{id: 2, name: "Humidity", unitName: "himidity", unitCategory: "%"}

它应该是这样的，但是当我将它传播到values对象中时，我得到：

TypeError: Cannot read property 'name' of null

我使用此处的代码向我的 woocommerce 添加了自定义状态列表： https: //docs.woocommerce.com/document/addmodify-states/

新添加的状态在前端和某些后端屏幕上加载良好，但是在电子邮件和用户帐户屏幕中，woocommerce 仅加载代码/值而不是实际名称。（XX1、XX2 等）

我相信我可以使用以下逻辑修复它：

echo WC()->countries->states[$current_user->billing_country][$current_user->billing_state]; //to get State name by state code

所以我想知道是否可以使用此逻辑创建一个函数，每当模板调用代码时，该函数都会打印状态名称？任何帮助将非常感激。

我真的很难用 React 中的方法将状态重置回原来的状态。我当前的重置方法仅重置该值。我尝试添加等于原始状态的 const，然后将状态设置为等于该状态，但我没有运气。

有什么建议吗？

class App extends Component {
  state = {
    counters: [
      { id: 1, value: 4 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]
  };

  handleReset = () => {
    const counters = this.state.counters.map(c => {
      c.value = 0;
      return c;
    });
    this.setState({ counters: counters });
  };
}

我目前的任务是构建一个用于政府机构和公民之间通信的无服务器架构，主要组件是某种形式的队列，其中包含某种形式的指向每个公民请求的对象/指针，按优先级排序。然后，政府工作人员可以在可用时处理元素。由于 Lambda 是无状态的，我需要以某种方式将队列保存在外部。

为了保存状态，我收集到您可以使用 DynamoDB 或 S3 存储桶并使用事件触发器来调用相关的 Lambda 方法。有些还建议使用 Parameter Store 来保存一些状态变量。全局存储东西也出现了，尽管你不能保证 Lambda 不会终止，这似乎不是一个好主意。

最后，我还阅读了一些有关 SQS 的内容，尽管我不知道它是否适用于这种情况。

以这种方式使用 Lambda 时，最佳实践/建议方法是什么？由于事件触发，我倾向于 S3 Bucket，而不是使用 DynamoDB 作为我们的数据库。

我的反应组件包含此代码

 handleChange = e => {
    this.setState({
      num: e.target.value
    });
  };

  render() {
    return (
      <div>
        <h2>Delete cat :(</h2>
        <input
          onChange={this.handleChange}
          type="number"
          placeholder="enter id here"
        />
        <button id="deleteBtn" onClick={this.deleteOne}>
          Delete
        </button>
      </div>
    );
  }
}

正如您所看到的，handleChange 函数在输入更改时触发，并将从那里更新状态。

我如何使用酶来测试这一点？我试过了

 it("Updates the state", () => {
     const wrapper = shallow(
       <Provider store={store}>
         <DeleteOne />
       </Provider>
     );
     const input = wrapper.find("input");

     input.simulate("change", { target: { num: 2} });

     expect(wrapper.state().num).toEqual(2);
   });
});

我不得不尝试将其包装在 store 中，因为我正在使用 Redux 并导出连接的组件。在过去的一个小时里，我一直在谷歌上搜索并尝试各种方法，但未能通过此测试。请发送帮助:)干杯

PS：我已经测试过按钮点击，不用担心，因为它只是运行一个功能（没有状态更新）。

我的组件有表单输入字段。这些使用了 useState 钩子及其值和每个输入字段的 setValue。我想优化我的组件，以便输入字段使用相同的自定义 Hook，我称之为 useFormInput

灵感来自 Dan Abramov https://youtu.be/dpw9EHDh2bM参见 49:42

这非常有效。但是现在我想在创建新练习后更新用户名。这是在 onSubmit 方法中。但我不知道该怎么做。在重构之前，我可以使用 setUserName()，但现在用户名是由通用自定义挂钩函数 useFormInput 设置的

用户名有一个 onChange 方法，所以我想我可以使用它。但是，这使用了 e.target.value，因为它用于输入字段。

组件：我注释掉了setUserName('')，这里我想更新用户名

  const CreateExercise = () => {
  const inputEl = useRef(null)
  const username = useFormInput('')
  const description = useFormInput('')
  const duration = useFormInput(0)
  const date = useFormInput(new Date())
  const [users, setUsers] = useState([])
  useEffect(() => {
    axios
      .get('http://localhost:5000/users/')
      .then(res => {
        if (res.data.length > 0) {
          setUsers(res.data.map(user => user.username))
        }
      })
      .catch(err => console.log(err))
  }, [])
  const onSubmit …

有没有解决方案如何检查字符串（例如：Google）并将链接反应路由器添加到特定单词（例如：Google）？

像这张照片的例子

前

后

这是我非常简单的代码

import React, { Component } from "react";
import { Link } from "react-router-dom";

class App extends Component {
  state = {
    text: "Google is my Friend, Google is Search Engine, Thanks to google"
    website: "Google Friend"
  };

  render() {
    let text = null;
    if (this.state.text.includes(this.state.website)) {
      return (text = (
        <div>
          <Link to={"/example"}>Google </Link> then state text
        </div>
      ));
    }
    return <div>{text}</div>;
  }
}

export default App;

如果您可以向我展示如何在特定单词（例如：Google）内添加样式（例如更改颜色，或添加粗体/斜体或其他内容），那将会更有帮助

谢谢

我正在通过 socket.io 提取数据，但是当侦听来自服务器的传入消息时，我的状态未正确更新。

我可以看到数据正在从套接字中正确提取（每秒 50 个请求），但setQuotes 只是用从服务器返回的新项目替换现有项目（因此我的状态的长度始终为 1）。

  const [quotes, setQuotes] = useState([])
 const subscribe = () => {
    let getQuote = 'quote.subscribe';
    socket.emit(getQuote, {});
    socket.on('listenAction', function (msg) {
        setQuotes([...quotes, msg]) // This just replace the entire state instead of adding items to the existing array
    }); 
}

Subscribe // 打开网络套接字流

尝试在 React 功能组件中建立 WebSocket 连接，并使用钩子更新状态变量，如下所示 [参考 1]：

export default function foo() {
    const [ arr, setArr ] = useState([])
    ws = useRef(null)

    useEffect( () => {
        ws.current = new Websocket('ws://example.com:1234')
        ws.current.onmessage = (m) => {
            setArr([...arr, m])
        })
    }, []) // Runs once at mount
}

的状态arr未保留。它被覆盖。

注意我也尝试传递arr到效果中，就像这样，但这导致了无限循环。[参考文献 2]。随着 arr 的更新，效果被称为...

        })
    }, [arr])
}

举一个更具体的例子，取三个 websocket 消息：

['a']
['b']
['c']

更新后每条消息的预计到达时间

['a']
['a', 'b']
['a', 'b', 'c']

结果：

['a']
['b']
['c']

为什么不与回调中的钩子arr一起存储？ …

我创建了一个自定义属性包装器，它作为其 setter 和 getter 从文件中写入和读取。

@propertyWrapper struct Specifier<Value> {
    let key: String
    let defaultValue: Value
    let plistPath: String
    
    var prefs: NSDictionary {
        NSDictionary(contentsOfFile: plistPath) ?? NSDictionary()
    }

    var wrappedValue: Value {
        get {
            return prefs.value(forKey: key) as? Value ?? defaultValue
        }
        set {
            prefs.setValue(newValue, forKey: key)
            prefs.write(toFile: plistPath, atomically: true)
        }
    }
}

我现在想在设置视图中使用它，如下所示：

struct PrefsView: View {
    @Specifier<Bool>(key: "enable", defaultValue: true, plistPath: "/Library/path/to/Prefs.plist") private var enable

    var body: some View {
        Form {
            Toggle("Enable", isOn: $enable)
        }
    }

} …