Обновление переменной состояния и вызов в состоянии реакции?

#reactjs #antd

#reactjs #antd

Вопрос:

Я использую шаги из antD и сталкиваюсь с проблемой при обновлении шагов с изменением реквизита.

  import Step1 from './step1.js'
  import Step2 from './step2.js'
  import {Steps} from 'antD'
  state={ 
          list:[] 
          step: [
           {
            title : "first"
            content : this.step1()
           } 
           {
            title : "Second"
            content : <Step2 list={this.list}/>
           } 
         ]
       }



step1=()=>{
return (
<Step1/>
)
}
 render(){
<div >
        <Steps current={current}>
          {this.state.step.map((item) => (
            <Step key={item.title} title={item.title} />
          ))}
        </Steps>
        <div >{this.state.step[current].content}</div>
        <div>
          {current < this.state.step.length - 1 amp;amp; (
            <Button type="primary" onClick={() => this.next()}>
              Next
            </Button>
          )}
          {current === this.state.step.length - 1 amp;amp; (
            <Button
              type="primary"
              onClick={() => message.success("Processing complete!")}
            >
              Done
            </Button>
          )}
          {current > 0 amp;amp; (
            <Button onClick={() => 
                this.prev()}>
              Previous
            </Button>
          )}
        </div>
      </div>
  

}

this.state.list обновляется каждый раз f , когда запускается функция, но список в Step2 не обновляется. Всегда передается значение null.

РЕДАКТИРОВАТЬ: как мне получить доступ step1() к внутреннему состоянию. this будет ссылаться на состояние внутри состояния.

Это мой полный код..

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

1. Я считаю, что содержимое будет создано и this.list будет разрешено при создании состояния. Таким образом, ваш step2 всегда будет иметь начальное значение. Кроме того, разве это не было this.state.list бы в step2 в любом случае?

2. @ZacharyHaber в данном случае это будет относиться к состоянию, вот почему this.list

Ответ №1:

Не переводите элементы React в состояние — это часто приводит к поломке, особенно если они принимают реквизит, который вы хотите изменить при рендеринге.

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

Например, вместо:

 render() {
  return (
    <div>
      {this.state.step[1].content}
    </div>
  )
}
  

делать

 render() {
  return (
    <div>
      <Step2 list={this.list} />
    </div>
  )
}
  

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

1. как получить доступ к функции внутри состояния? «это» вызовет состояние? редактирование вопроса

2. Обычно не- состояние должно содержать только данные , а не функции, которые зависят от контекста вызова. Не стесняйтесь вызывать функции в render() или в другом месте, но не храните функции в состоянии.

3. Не могли бы вы один раз проверить мой код. Я не понимаю, как поступить в этом случае. Похоже, я где-то ошибаюсь