реагировать хуки, не могу обновить состояние через реквизит

Question

пытается обновить переменную состояния ('visible') через внутреннюю функцию (setVisible) в компоненте. Я проверил tutorıal и сделал то же самое, но он не обновлялся после инициализации состояния. Ссылка Sandobx здесь .

props.visible имеет значение true, когда пользователь нажимает кнопку ShowModal. но значение visible в компоненте функции все еще ложно. (Я проверил содержимое в отладчике)

код:

import Modal from '../Helpers/AppModal'

    class Streams extends Component {
        constructor(props) {
            super(props)
            this.state = { showModal: false }
        }

        componentDidMount() {
            this.props.getStreams()
        }

        showDeleteModal = (isShow) =>
        {
            this.setState({ showModal: isShow });
        }
        onClickBackdrop = () => {this.setState({ showModal: false });}

        render() {
            return (
                <div>
                    <button onClick={()=> this.showDeleteModal(true)} className="btn btn-danger">Delete</button>

                    <Modal visible={this.state.showModal} onClickBackdrop={this.onClickBackdrop} />
                </div>
            )
        }
    }

AppModal.js:

 const AppModal = (props) => {
  const [visible, setVisible] = useState(props.visible)
  useEffect(() =>{
    setVisible(props.visible)
},[props.visible])

  debugger
  return (
    <Modal visible={visible} fade={true} onClickBackdrop={props.onClickBackdrop}>
            <div className="modal-header">
              <h5 className="modal-title">{props.title}</h5>
            </div>
            <div className="modal-body">
              {props.body}
            </div>
            <div className="modal-footer">
            <React.Fragment>
              <button type="button" className="btn btn-default" onClick={()=>setVisible(false)}>
                Close
              </button>
            </React.Fragment>

            </div>
          </Modal>
  )
}

Answer 1

Аргумент, переданный useState, является просто начальным состоянием. Передача prop не означает, что state будет синхронизирован с props. Вы можете настроить эффект для отражения этих изменений в вашем местном состоянии.

В настоящее время ваши Modal видят только visible из локального состояния, изменение значения props не приведет к изменению Modal

//Inside child
useEffect(() =>{
    setVisible(props.visible)
},[props])

Почему следуетЯ использую props вместо props.visible там?

Массив зависимостей существует для сохранения синхронности, вы говорите react:

"Эй, каждый раз, когда один из нихизменения значений запускают этот эффект. "

Проблема в том, что React выполняет поверхностное сравнение (Object.is) между старым и новым props, каждый из которых render открывает новый props объектгенерируется, что именно то, что вызывает ваш эффект в первую очередь.

React не знает, как «реагировать» на вложенные изменения. Что действительно меняется здесь, так это props, реакция не знает (и не волнует) о props.visible, передача его как зависимости - это то же самое, что и передача []

Фактически передача props поскольку зависимость бесполезна, так как props меняет каждый рендер, вы можете опустить массив зависимостей, который будет вызывать эффект при каждом рендере

useEffect(() => {
    setVisible(props.visible)
})

Answer 2

Если это тумблер, то вы должны сделать это:

onClick={() => setVisible(!visible)}

Тогда он будет включаться / выключаться правильно.

Возможно, вы захотите установить начальное значение более явнохотя:

const [visible, setVisible] = useState(false);

Answer 3

visible - логическое значение.

Попробуйте изменить способ вызова setVisible следующим образом:

setVisible(false)

вместо

setVisible({visible:false})