我无法使用 React 钩子更新我的字符串值答案

【问题标题】：I can't update my string value with React hooks我无法使用 React 钩子更新我的字符串值
【发布时间】：2020-06-03 14:50:10
【问题描述】：

这是你能想到的最简单的情况，

我有一个选择，它根据应该更新选择本身的属性（其背景颜色）的值来更新字符串

我正在使用 React hooks 和 Styled Components 来实现这一点。

我让 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;

【问题讨论】：

你使用了一个记忆回调，所以除非colorList改变e.target.value永远不会改变。
您可能应该将useCallback 的依赖数组从colorList 更改为[colorList]。这会导致更改变量来触发更新，而不是更改 colorList 中的项目

标签： reactjs react-hooks styled-components

【解决方案1】：

这里有一些修复，检查代码中的 cmets：

// 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;

// Your styled components receives now a prop with the name currentColor.
// Use it inside the interpolation string ${} and set the value
const SelectColor = styled.div`
  select{
    background-color: ${(props) => props.currentColor || 'black'};
  }
  .label{
    width: 150px;
    font-size: 14px;
    text-align: left;
    margin-left: 6px;
  }
`;

希望这会有所帮助！觉得有必要就问吧，有空我会帮忙的！

【讨论】：

【解决方案2】：

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

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

【讨论】：