标签: use-state

我的状态设置为

const [filteredProducts, setFilteredProducts] = useState([]);

我希望能够附加到该状态的末尾。我目前正在尝试

products.forEach((product) => {
        if (product.category === category) {
          setFilteredProducts([...filteredProducts, product]);
        }
      });

它正确地循环遍历产品数组。我什至可以在 setFilteredProducts 之后记录产品，它会记录我想要的正确产品。我用 onClick 来调用它。

我是 ReactJS 世界的新手，\n我想更新包含对象数组的 useState 挂钩，但它现在正在根据我的要求更新数据\n请帮助我。

联系表单.js

function ContactForm() {\n  const [user, setUser] = useState([]);\n\n  const submitForm = () => {\n    console.log(user);\n  };\n\n  return (\n    <div>\n      <input\n        type="text"\n        placeholder="name"\n        onChange={(e) =>\n          setUser((state) => [...state, { user_name: e.target.value }])\n        }\n        value={user.user_name}\n      />\n      <input\n        type="text"\n        placeholder="mobile"\n        onChange={(e) =>\n          setUser([...user, [...user, { mobile_number: e.target.value }]])\n        }\n        value={user.mobile_number}\n      />\n      <button onClick={submitForm}>Submit</button>\n    </div>\n  );\n}\n

我期待类似的事情

[{\n    user_name:"abc",\n    mobile_number:"123"\n}]\n

应该存储在我的州，但我得到一些不同的输出，如下所示

0: {user_name: "a"}\n1: {user_name: "as"}\n2: {user_name: "asd"}\n3: (4) [{\xe2\x80\xa6}, {\xe2\x80\xa6}, {\xe2\x80\xa6}, …

我目前正在学习反应，但我有这个错误

错误：重新渲染次数过多。React 限制渲染数量以防止无限循环。

这是代码

    const [Status, setStatus] = useState(false);
    if (sessionStorage.getItem("token")) {
        setStatus(true);
    }```

我正在反应中创建一个模式，我希望当单击卡片时会出现模式，但我在显示它时遇到问题。我正在使用 UseState 来处理打开和关闭（切换 true 或 false），但是当单击卡片时，我收到一条错误，提示TypeError: setIsOpen is not a function 我怎样才能使它工作？我不明白为什么会发生这种情况。这是我的代码。

import React, { useState } from "react";
import Modal from "../modal/projectModal.jsx";

// Scss
import "./projectBox.scss";

const ProjectBox = (props) => {
  const { isOpen, setIsOpen } = useState(false);

  return (
    <div>
      <div className="portfolio__box" onClick={() => setIsOpen(true)}>
        <img src={props.preview} alt="project" />
        <div className="portfolio__hover-info flex-center">
          <div className="text-center">
            <p className="font30 weight800">{props.title}</p>
            <p className="font12 weight500">{props.tag}</p>
          </div>
        </div>
      </div>
      <Modal open={isOpen}>project details</Modal>
    </div>
  );
};

export default ProjectBox;

美好的一天，我似乎无法弄清楚这一点。我收到“InvalidStateError：尝试使用不可用或不再可用的对象”，让我解释一下：

我有一个 CustomUpload 组件：

export const CustomUpload = ({ name, children, accept, onChange, value }) => {
  const fileUpload = useRef(null);

  const handleClick = (e) => {
    e.preventDefault();
    fileUpload.current.click();
  };

  return (
    <div className="custom-upload-container">
      <label
        style={{ textAlign: "center", fontFamily: "var(--montserrat-text)" }}
        htmlFor={name}
      >
        {children}
      </label>
      <div className="custom-upload-input-container">
        <p>{value.name}</p>
        <div className="input-container">
          <input
            ref={fileUpload}
            className="custom-upload"
            type="file"
            name={name}
            accept={accept}
            onChange={onChange}
            value={value}
          />
        </div>

        <CustomButton onClick={handleClick}>Browse</CustomButton>
      </div>
    </div>
  );
};

然后我有一个页面，用户必须提交 5 张图像，但为了简单起见，我将使用两张：

export const Images = () => {
const [data, setData] = …

嘿，谁能告诉我状态加载的作用是什么？我们的目标是使用 axios 中的“setLoading(true)”实现什么目的？谢谢你！

我有以下用例：

用户想要切换配置文件是否处于活动状态。

配置： \nNext.js、\nFauna DB、\nreact-hook-form

我使用 useState 来更改切换上的状态，并使用 React-hook-forms 将其他值发送到我的 Fauna 数据库以及切换中的状态。我希望切换具有数据库中的状态，当用户切换它并按下提交按钮时，我想更改数据库中的状态。

当我切换数据库时，我似乎无法将正确的状态发送回数据库。

主要成分：

export default function Component() {\n const [status, setStatus] = useState(\n    userData?.profileStatus ? userData.profileStatus : false\n  );\n\nconst defaultValues = {\n    profileStatus: status ? userData?.profileStatus : false\n  };\n\nconst { register, handleSubmit } = useForm({ defaultValues });\n\n  const handleUpdateUser = async (data) => {\n\n    const {\n      profileStatus\n    } = data;\n    try {\n      await fetch(\'/api/updateProfile\', {\n        method: \'PUT\',\n        body: JSON.stringify({\n          profileStatus\n        }),\n        headers: {\n …

我正在尝试实现 useState 来存储递增值。当我尝试增加该值时，它不会更新它。我尝试手动将值设置为特定数字，这确实有效。怎么了？

const [cardsIndex, setCardsIndex] = useState(0);

       <Card style={[styles.card, styles.card1]} key={index}
          onSwipedRight={(event) => { setCardsIndex(cardsIndex+1);}}
          onSwipedLeft={(event) => { setCardsIndex(cardsIndex+1);}}
       >

我目前正在减少/删除 React 站点上的 npm 警告。

大量这些警告是由 setState 函数引起的，如下所示，“未使用”。

const [state, setState] = useState('some state');

以下哪项是删除这些警告的更好方法？或者有没有更好的方法来解决这个问题？

1.

const[state] = useState('some state');

const state = 'some state';

据我所知，useEffect 钩子最后作为 sideEffect 运行。我正在尝试控制台日志 data.main.temp。我可以理解它还不知道那是什么，因为它正在从后面运行的 useEffect 钩子中的 api 获取数据。

在 api 调用后，我如何能够访问或控制台日志 data.main.temp？（我觉得 setTimout 是作弊方式？）

import React, { useState, useEffect } from "react";
import Button from "../UI/Button";
import styles from "./Weather.module.css";
import moment from "moment";
import Card from "../UI/Card";

export default function Weather() {
  //State Management//
  const [lat, setLat] = useState([]);
  const [long, setLong] = useState([]);
  const [data, setData] = useState([]);

  //openWeather API key
  const key = "xxxxxxxxxxxxxxxxxxxxxxxxxx";

  useEffect(() => {
    const fetchData = async () => {
      //get coordinates// …