onChange 用useCallback 包裹 ,onChange里面无法修改父组件的状态！把useCallback 干掉可以吗？

[RobinYang11]

[jaywcjlove]

@RobinYang11 https://codesandbox.io/embed/lucid-https-5718lo?fontsize=14&hidenavigation=1&theme=dark

我测试并没有什么问题

[RobinYang11]

import "./styles.css";
import { useState } from "react";
import Alpha from "@uiw/react-color-alpha";
import { hsvaToRgbaString } from "@uiw/color-convert";

function Demo() {
  const [hsva, setHsva] = useState({ h: 0, s: 0, v: 68, a: 1 });
  const [obj,setObj] = useState({
    name:"robin",
    age:33
  })

  return (
    <>
      <Alpha
        hsva={hsva}
        onChange={(newAlpha) => {
          setHsva({ ...hsva, ...newAlpha });
          setObj({
            ...obj
          })
        }}
      />
      {obj.name}
      <button onClick={()=>{
        setObj({
          ...obj,
          name: "changedName"
        })
      }}>changeName</button>
      <div
        style={{
          background: hsvaToRgbaString(hsva),
          marginTop: 30,
          padding: 10
        }}
      >
        {JSON.stringify(hsva)}
    
      </div>
    </>
  );
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Demo />
    </div>
  );
}

[RobinYang11]

先点击button 改变名字， 然后你再拖动 ，name 就变为初始值了，就是因为包了useCallback

[RobinYang11]

@RobinYang11 https://codesandbox.io/embed/lucid-https-5718lo?fontsize=14&hidenavigation=1&theme=dark

我测试并没有什么问题

https://codesandbox.io/s/naughty-thompson-19bp2o?file=/src/App.js:341-342

[jaywcjlove]

@RobinYang11 你拖动的时候，不是去改变了 name ?

[jaywcjlove]

先点击button 改变名字， 然后你再拖动 ，name 就变为初始值了，就是因为包了useCallback

我看了示例，name 并没有变成初始值，而是 onChange 去更改了 name 的值

[RobinYang11]

你再刷新一下 我的例子 我改了，我增加了一个数组字段

[RobinYang11]

@jaywcjlove https://codesandbox.io/s/naughty-thompson-19bp2o?file=/src/App.js

[jaywcjlove]

@RobinYang11 Upgrade v1.1.4

[jaywcjlove]

https://codesandbox.io/embed/clever-sun-2yi6s0?fontsize=14&hidenavigation=1&theme=dark