Reactjs 我无法使用React钩子更新字符串值

这是你能想到的最简单的例子

我有一个select，它根据应该更新select本身的属性及其背景色的值来更新字符串

我使用React钩子和样式化组件来实现这一点

我有Redux，以便将来能够将其绑定为一个不可变的颜色数组

问题很简单，为什么我不能更新状态？我试图打印它，但它总是一个空字符串

这是我的样式文件

let currentColor = '';

const SelectColor = styled.div`
  select{
    background-color: ${currentColor || 'black'};
  }
  .label{
    width: 150px;
    font-size: 14px;
    text-align: left;
    margin-left: 6px;
  }
`;

这是由于我无法理解的原因而没有更新selectValue的组件。我试图通过控制台记录它，但它总是返回空字符串。 我已经检查了几次文档，它似乎是要以这种方式更新，所以我不知道

const SelectComponent = ({
  disabled,
  colorList,
  label,
  onSelect,
  ...restProps
}) => {
  const [selectValue, setSelectValue] = useState('');

  const handleChange = useCallback(
    (e) => {
      setSelectValue(e.target.value);
      console.log(selectValue);
    },colorList
  );

  return (
    <SelectColor>
      <span className='label'>{label}</span>
      <select onChange={e=>handleChange(e)}>
        {
          colorList.map(color =>
          <option key={color} value={color}>{color}</option>)
        };
      </select>
    </SelectColor>
  );
};

SelectComponent.propTypes = {
  disabled: PropTypes.bool,
  hourValue: PropTypes.number,
  projectName: PropTypes.string,
};


export default SelectComponent;

---

handlechange函数对我来说有点奇怪，因为函数本身不接受变量。试着这样写

 const handlestring = (e) => {
   setSelectedValue(e.target.value)
}

---

handlechange函数对我来说有点奇怪，因为函数本身不接受变量。试着这样写

 const handlestring = (e) => {
   setSelectedValue(e.target.value)
}

---

这里有一些修复，请检查代码中的注释：

// SelectComponent
const SelectComponent = ({
  disabled,
  colorList,
  label,
  onSelect,
  ...restProps
}) => {
  const [selectValue, setSelectValue] = useState('');

  // Make this a function, not an arrow function. 
  // It's unnecessary in this case due to not needing a binding
  function handleChange(e) {
    setSelectValue(e.target.value);
  }

  // send currentColor as a prop to your styled component and remove 
  // the arrow onChange, not needed.
  return (
    <SelectColor currentColor={selectValue}>
      <span className='label'>{label}</span>
      <select onChange={handleChange}>
        {
          colorList.map(color =>
          <option key={color} value={color}>{color}</option>)
        };
      </select>
    </SelectColor>
  );
};

SelectComponent.propTypes = {
  disabled: PropTypes.bool,
  hourValue: PropTypes.number,
  projectName: PropTypes.string,
};


export default SelectComponent;

---

希望这有帮助！问你觉得必要的任何问题，如果我有空，我会帮助你的

这里有一些修复，请检查代码中的注释：

// SelectComponent
const SelectComponent = ({
  disabled,
  colorList,
  label,
  onSelect,
  ...restProps
}) => {
  const [selectValue, setSelectValue] = useState('');

  // Make this a function, not an arrow function. 
  // It's unnecessary in this case due to not needing a binding
  function handleChange(e) {
    setSelectValue(e.target.value);
  }

  // send currentColor as a prop to your styled component and remove 
  // the arrow onChange, not needed.
  return (
    <SelectColor currentColor={selectValue}>
      <span className='label'>{label}</span>
      <select onChange={handleChange}>
        {
          colorList.map(color =>
          <option key={color} value={color}>{color}</option>)
        };
      </select>
    </SelectColor>
  );
};

SelectComponent.propTypes = {
  disabled: PropTypes.bool,
  hourValue: PropTypes.number,
  projectName: PropTypes.string,
};


export default SelectComponent;

---

希望这有帮助！问你觉得必要的任何问题，如果我有空，我会帮助你的

您使用的是记忆回调，因此除非colorList更改，否则e.target.value永远不会更改。您可能应该将useCallback的依赖项数组从colorList更改为[colorList]。这会导致对变量的更改触发更新，而不会使用记忆回调更改colorListYour中的项目，因此除非colorList更改，否则e.target.value永远不会更改。您可能应该将useCallback的依赖项数组从colorList更改为[colorList]。这会导致对变量的更改触发更新，而不会更改colorList中的项目