Проблема с настройкой значения с реагирующими крючками - PullRequest
Новая
       1

Проблема с настройкой значения с реагирующими крючками

2 голосов
/ 26 апреля 2019

Я новичок в хуках и столкнулся с проблемой при их использовании. У меня есть два компонента: 

const Button = ({ isHidden, icon, onClick }) => {
  return (
    <div>
      {isHidden ? (
        <button className="tile" onClick={onClick} />
      ) : (
        <button className="tile" onClick={onClick}>
          <i className={icon} />
        </button>
      )}
    </div>
  );
};

const Board = () => {
  const [isHidden, setIsHidden] =useState(Array(12).fill(true));
  const [icon] = useState(animalArray);

  const renderButton = index => {
    return (
      <Button
        icon={icon[index]}
        isHidden={isHidden[index]}
        onClick={() =>setIsHidden(!isHidden[index])}
      />
    );
  };
  return (
    <div className="board">
      <div className="container">
        <div className="row align-items-start">
          <div className="col-3">{renderButton(0)}</div>
          <div className="col-3">{renderButton(1)}</div>
          <div className="col-3">{renderButton(2)}</div>

Поэтому, конечно, я хотел переключить состояние isHidden в конкретном тайле после нажатия на его кнопку. Вместо этого я перелистываю каждую плитку при первом клике, а затем при следующих кликах ничего не происходит. Я попытался изменить его, например, создать новые переменные, скопировать isHidden и т. Д. Спасибо.

Ответы [ 3 ]

2 голосов
/ 26 апреля 2019

Поскольку средство обновления состояний не объединяет состояние, вам необходимо передать все обновленное состояние в средство обновления и использовать шаблон обратного вызова.Вам также нужно вернуть новый экземпляр массива вместо его изменения, в противном случае состояние uptader не обнаружит изменения и не выполнит повторную визуализацию 

const renderButton = index => {
    return (
      <Button
        icon={icon[index]}
        isHidden={isHidden[index]}
        onClick={() =>setIsHidden(prevHidden => Object.assign([], prevHidden, {[index]: !prevHidden[index])}
      />
    );
  };
1 голос
/ 26 апреля 2019 
  <Button
    icon={icon[index]}
    isHidden={isHidden[index]}
    onClick={() =>setIsHidden(!isHidden[index])}
  />

Ваше состояние (isHidden) является массивом, но вы обновляете его до логического значения.

Вы можете сделать что-то вроде: 

  <Button
    icon={icon[index]}
    isHidden={isHidden[index]}
    onClick={() =>
      setIsHidden(oldArray => {
        return Object.assign([...oldArray, { [index]: !oldArray[index] }])
      })
    }
  />
1 голос
/ 26 апреля 2019

onClick должно быть 

onClick={() => setIsHidden(
  isHidden.map((hidden, hiddenIndex) => (
    index === hiddenIndex ? !hidden : hidden
  ))
)}
...