Я не могу обновить строковое значение с помощью React-хуков

Question

Как и в простейших случаях, которые вы можете себе представить,

У меня есть селектор, который обновляет тринг в соответствии со значением, которое должно обновлять свойство самого селекта (его цвет фона)

Я использую React-хуки и 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 по причинам, по которым я не могу gr asp (я попытался утешить журнал, и он всегда возвращает пустую строку). Я проверил документацию пару раз, и похоже, что она должна быть обновлена ​​таким образом, поэтому я ничего не понимаю ...

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;

Answer 1

Здесь у вас есть некоторые исправления, проверьте комментарии в коде:

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

Надеюсь, это поможет! Спросите все, что вы считаете необходимым, я помогу, если буду свободен!

Answer 2

Ваша функция handlechange немного странна для меня, поскольку сама функция не принимает переменную. попробуйте написать это так

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