Сохранение объекта JSON, переданного как реквизит, и способ доступа к его значениям

Question

поэтому в React у меня есть json объект, представляющий футбольную лигу с данными, которые выглядят следующим образом:

        {
            "league_id": 1,
            "name": "World Cup",
            "type": "Cup",
            "country": "World",
            "country_code": null,
            "season": 2018,  
        }

Я передаю это в качестве реквизита React Router Link следующим образом:

<Link className="linktext" to={{
     pathname: '/Leagues/' + {nameofLeague},
     state: {
         league: this.props.league
     }
     }}>
</Link>

И я хочу напечатать некоторые значения для ключей, такие как «имя» и «страна» объекта json, который я передал в файл ниже:

class LeagueInstancePage extends Component {
    state = {
        league: null
    };

    componentDidMount(){
        const {path} = this.props.match.params

        ***this is the json object and is passed successfully***
        const {league} = this.props.location.state

        console.log(path)
        console.lot(league)

        this.setState({league: this.props.location.state})
    }


render() {    
    return (
       <h3>League: {this.state.league.name} </h3></Row>
    );

   }
}
export default LeagueInstancePage;

Выводы журнала консоли работают и могут печатать объект следующим образом:

Проблема:

Я не могу получить доступ к значениям объекта в теге h3 в render () файла. Любые идеи?

Answer 1

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

<h3>League: {this.state.league? this.state.league.name: "Loading.."} </h3></Row>

Или вы можете скрыть всю строку, чтобы не видеть «Лига: Загрузка ...» на экране.

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

Answer 2

Проблема в том, что render может быть вызвано (неопределенное количество раз) до первой фиксации на экране, т.е. когда компонент фактически монтируется.

Как вы можете видеть здесь, render вызывается во время "фазы рендеринга", намного раньше, чем componentDidMount в "фазе фиксации".

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

class LeagueInstancePage extends Component {
    state = {
        league: null
    };

    componentDidMount(){
        const {path} = this.props.match.params

        const {league} = this.props.location.state

        console.log(path)
        console.lot(league)

        this.setState({league: this.props.location.state})
    }

render() {
    const { league: { name } } = this.state;    
    return name ? (
      <Row>
        <h3>League: {name} </h3>
      </Row>
    ) : null;
  }
}

export default LeagueInstancePage;

Примечание: Это также распространенный анти-шаблон для дублирования пропущенных реквизитов в состоянии компонента. В вашем случае вы можете получить прямой доступ к props.location.state.league.name, но все равно должны использовать соответствующие средства защиты доступа к свойствам объекта для защиты от ошибок «access ... of undefined ..» в случае, если пользователь косвенно переходит на страницу, отображающую этот компонент. .