useState 只是第一次改变了值答案

【问题标题】：useState changed value just at first timeuseState 只是第一次改变了值
【发布时间】：2020-07-11 06:52:09
【问题描述】：

我的钩子 useState 只更改一次状态，我一直有 1. 我该如何解决？

 const My = () => {
    const [state,setState] = useState({
        count : 0
    })

    useEffect(() => {
        console.log(state);
      },[state]);

    return (
        <div>
            <h1>{state.count}</h1>
            <button onClick={()=> setState(prevState => ({
                ...prevState,
                count: +1
            }))}>Click</button>
        </div>
    );
};

【问题讨论】：

标签： reactjs react-hooks use-state

【解决方案1】：

这是()=> setState(prevState => ({ ...prevState, count: +1 }))的问题，可以这样解决：

onClick={() =>
           setState(prevState => ({
             ...prevState,
             count: prevState.count+1
           }))
         }

【讨论】：

【解决方案2】：

您的代码中有语法错误：count: +1。

所以，快速解决方法是这样的：

const My = () => {
  const [state,setState] = useState({
    count : 0
  })

  useEffect(() => {
    console.log(state);
  }, [state]);

  return (
    <div>
      <h1>{state.count}</h1>
      <button onClick={()=> setState(prevState => ({
        ...prevState,
        count: prevState.count + 1
       }))}>Click</button>
    </div>
  );
};

但是，您的代码可以大大简化。这将输出完全相同的内容：

const My = () => {
  const [count, setCount] = useState(0);

  console.log(state);

  return (
    <div>
      <h1>{state.count}</h1>
      <button onClick={()=> setCount(count + 1)}>Click</button>
    </div>
  );
};

【讨论】：