javascript React -无法使用onClick内的setState更新状态

zf9nrax1 于 2023-01-04 发布在 Java

关注(0)|答案(3)|浏览(203)

我无法在按钮的onClick事件中使用setState更新我的状态。我尝试在函数中放入console.log，它可以工作，但setState不工作
我试过两种方法，一种是：

<button onClick={() => setColEdit("")} className="bg-red-500 text-white p-1">
    <i className="pi pi-times"></i>
</button>

二是：

const cancelEdit = () => {
    setColEdit((edit) => edit = "123")
}
<button onClick={cancelEdit} className="bg-red-500 text-white p-1">
    <i className="pi pi-times"></i>
</button>

我尝试将console.log放入arrow函数中，它可以工作，但状态没有更新
我不知道我的代码出了什么问题，或者是否有我不知道的关于setState如何工作的东西。或者有其他解决我的问题的方法？谢谢

EDIT非常抱歉，以下是完整代码

import { useState } from "react"
import { NumericFormat } from "react-number-format"

const Component: NextPageWithLayout= () => {

const [colEdit, setColEdit] = useState("")

const cancelEdit = () => {
    setColEdit("")
}

return (
    <span onClick={() => setColEdit("sk_123")}>
        {colEdit == "sk_123" ? (
        <form className="flex items-center gap-1">
            <input type={'text'} defaultValue={1000} autoFocus />
            <button onClick={cancelEdit} className="bg-red-500 text-white p-1">
                <i className="pi pi-times"></i>
            </button>
        </form>
                                                                                
    ) : (
        <NumericFormat
            value={1000}
            prefix="Rp "
            displayType='text'
            thousandSeparator='.'
            decimalSeparator=','
        />
    )}
    </span>

JavaScript

来源：https://stackoverflow.com/questions/74992382/react-cant-update-state-using-setstate-inside-onclick

3条答案

按热度按时间

dldeef671#

希望您的通用组件结构至少包含以下代码：

const [col, setColEdit] = useState(1);

完整样本代码：

import { useState } from "react";

export default function App() {
  const [col, setColEdit] = useState(1);

  return (
    <div className="App">
      <button
        onClick={() => setColEdit("")}
        className="bg-red-500 text-white p-1"
      >
        <i className="pi pi-times">Click</i>
      </button>
      <h1>My Col Edit value is - {col}</h1>
    </div>
  );
}

赞(0）回复(0）举报 2023-01-04

vwoqyblh2#

一定是useState声明有问题
下面是一个工作示例，其中包含3种方法来完成您要尝试完成的任务
https://codesandbox.io/s/upbeat-leakey-m4lgrd

import { useState } from "react";

export default function App() {
  // use state declaration must look like this
  const [colEdit, setColEdit] = useState("zero");

  const handleClickOne = (e) => {
    setColEdit((previous) => (previous = "one"));
  };

  const handleClickTwo = (e) => {
    setColEdit("two");
  };

  return (
    <div className="App">
      <h1>{colEdit}</h1>
      <button onClick={handleClickOne}>One ?</button>
      <button onClick={handleClickTwo}>Two ?</button>
      <button onClick={() => setColEdit("three")}>Three ?</button>
    </div>
  );
}

赞(0）回复(0）举报 2023-01-04

kgqe7b3p3#

请检查您的状态。

import { useState } from "react";
export default function App() {
  // Please check your state there must be an issue.
  const [colEdit, setColEdit] = useState("initialValue");

  const handleClick = (e) => {
    setColEdit("");
  };

  return (
    <div className="App">
      <button onClick={handleClick} className="bg-red-500 text-white p-1">
           <i className="pi pi-times"></i>
      </button>
    </div>
  );

}

赞(0）回复(0）举报 2023-01-04

我来回答

javascript React -无法使用onClick内的setState更新状态

3条答案

相关问题

热门标签

最新问答