使用反应钩子和反引号时未定义“状态”[关闭]答案

【问题标题】：'state' is not defined when using react hooks and backticks [closed]使用反应钩子和反引号时未定义“状态”[关闭]
【发布时间】：2023-03-31 17:16:02
【问题描述】：

我正在使用 tailwind CSS 制作一个反应应用程序，并试图在一个按钮上实现一个 onClick 函数，该函数将改变所述按钮的颜色。但是，样式存储在 Tailwind 的类名中，我正在尝试使用反引号和 useState 挂钩。我目前收到“'state' is not defined”的错误

代码附在下面，非常感谢。

import { Link } from 'react-router-dom';

function Column(props){
  const [color, setColor] = useState({color:'yellow-200'})

  const onClic=()=>{
    setColor('grey-200')
  }
  return (
    <button className={`w-300 hover:bg-yellow-100 shadow-xl p-6 max-w-xs mr-1.5 ml-4 mt-4 mb-4 bg-${state.color} rounded-xl shadow-md flex items-center space-x-4`} >

        <div class="flex-shrink-0">
            <img class="h-12 w-12" src={props.img} alt={props.name}/>
        </div>
        <div>
            <div class="text-xl font-medium text-black">{props.name}</div>
            <p class="text-gray-500">{props.price}</p>
        </div>
    </button>
  );
};

export default Column;

【问题讨论】：

猜是错字，用color.color代替state.color。
建议你再看一遍教程，这次慢一点，小心一点。特别是，您查看examples given，从概念上了解它们与您正在做的事情有何不同。
你的 state 被命名为color 并且具有{color:'yellow-200'} 的形状，但是稍后你用一个简单的字符串更新它：setColor('grey-200') 而不是：@987654328 @。所以不管有什么其他错误，它最终都会在那个时候发生。

标签： javascript reactjs

【解决方案1】：

有了功能组件和钩子，你就不需要访问state.color，你有一个状态值叫做color，你可以直接使用它。

<button 
  className={`w-300 hover:bg-yellow-100 shadow-xl p-6 max-w-xs mr-1.5 ml-4 mt-4 mb-4 bg-${color} rounded-xl shadow-md flex items-center space-x-4`} 
>

此外，您的按钮需要onClick 来处理您的状态更新。

const handleClick = () => {
  setColor("somecolor");
}

<button 
  className={`w-300 hover:bg-yellow-100 shadow-xl p-6 max-w-xs mr-1.5 ml-4 mt-4 mb-4 bg-${color} rounded-xl shadow-md flex items-center space-x-4`}
  onClick={handleClick}
>

【讨论】：

【解决方案2】：

const [color, setColor] = useState({color:'yellow-200'})

这会在当前范围内创建一个名为 color 的变量（以及一个名为 setColor 的变量用于更新状态）。

它不会使用color 属性创建名为state 的变量。

直接访问color。 state 没有定义，因为你没有定义它。

【讨论】：