Блог

Главная - Вопросы по программированию - Как установить состояние, которое находится на компоненте?

Как установить состояние, которое находится на компоненте?

#reactjs

#reactjs

Вопрос:

В reactjs, как я могу снова установить Notify состояние, которое находится на компоненте?

 import React, { useState } from 'react'

const NotificationError = (props) => {

    const [notify, setNotify] = useState(false);

    // if (props.message === "") {
    //     props.message = "Some Error"
    // }

    // if (props.message !== "") {
    //     setNotify(false)
    // }

    // if (props) {
    //     const [notify] = useState(true)
    // }

    console.log("notify.state:", props)

    const closeNotification = (e) => {
        console.log("Should be closing notification")
        setNotify(e)
    }

    return (
        <div className="notification is-danger" style={notify ? {display: 'none'} : {display: 'block'}}>
            <button className="delete" onClick={() => closeNotification(true)}></button>
            Error: {props.message}
        </div>
    )
}

export default NotificationError

Если я использую следующее:

 if (props) {
    const [notify] = useState(true)
}

Я получаю сообщение об ошибке,

Строка 17:26: Хук реакции «useState» вызывается условно. Реагирующие хуки должны вызываться в том же порядке, что и в каждом компоненте, отображающем react-hooks / rules-of-hooks

Если я использую следующее

 if (props.message !== "") {
        setNotify(true)
    }

Он выдает следующее…

Ошибка: слишком много повторных рендерингов. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл.

Просто я этого не понимаю. Не могли бы вы помочь? 🙁

Комментарии:

1. Вы не можете использовать useState условно. Для условий вы должны использовать эффект, и вы можете установить свое значение при изменении условия.

2. Я попытался, useEffect(() => { // const notify = useState(true) return () => { // Очистить уведомление о подписке.closeNotification(false); }; }, уведомить); но уведомление по-прежнему не отображается.

3. вы не можете определить useState в useEffect определить useState из useEffect и setState в useEffect условно.

Ответ №1:

Перепишите свою логику на что-то вроде:

 const NotificationError = (props) => {
  const [notify, setNotify] = useState(false);

  useEffect(() => {
    if (props.message === "") {
      props.setMessage('Some Error');
    }
    setNotify(false);
  }, [props.message]);

  return (
    <div
      className="notification is-danger"
      style={notify ? { display: "none" } : { display: "block" }}
    >
      <button className="delete" onClick={() => setNotify(true)}></button>
      Error: {props.message}
    </div>
  );
};

Реквизиты неизменяемы, поэтому, если вы хотите изменить сообщение, вы должны передать обратный вызов.
Кроме того, ознакомьтесь с правилами перехватов.

Ответ №2:

Используйте useEffect перехват для таких случаев. Он работает аналогично componentDidMount и componentDidUpdate в классе component. Это означает, что функция, которую вы передаете в качестве первого аргумента useEffect hook, запускается в первый раз, когда ваш компонент монтируется, а затем каждый раз, когда изменяется какой-либо из элементов массива, который вы передаете в качестве второго аргумента.

Вот пример кода:

 const NotificationError = (props) => {
    const [notify, setNotify] = useState(false);
    
    useEffect(() => {
        if(props.message != '') {
           setNotify(false);
        }
    }, [props.message])

    const closeNotification = (e) => {
        console.log("Should be closing notification")
        setNotify(e)
    }

    return (
        <div className="notification is-danger" style={notify ? {display: 'none'} : {display: 'block'}}>
            <button className="delete" onClick={() => closeNotification(true)}></button>
            Error: {props.message}
        </div>
    )
}