1
votes

Pourquoi je ne peux pas obtenir la propriété de l'objet ReactJs

J'ai ce code et j'essaie de passer la variable dans JSX dans la section render du script React Js. J'ai une erreur Impossible de lire la propriété 'title' non définie .

Pourquoi si j'ai cette propriété dans l'objet?

constructor() {
  super();
  this.state = {
    blogs: []
  };
}

componentDidMount() {
  const blogss = [
    {
      title: "Ð’ÑÐµÐ¼Ð¾Ð³ÑƒÑ‰Ð°Ñ Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ Query â€” Ð¿Ð¾Ð´Ñ€Ð¾Ð±Ð½Ð¾Ðµ Ñ€ÑƒÐºÐ¾Ð²Ð¾Ð´ÑÑ‚Ð²Ð¾",
      author: 1,
      viewers: 213
    },
    {
      title: "Ð’ÑÐµÐ¼Ð¾Ð³ÑƒÑ‰Ð°Ñ Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ Query â€” Ð¿Ð¾Ð´Ñ€Ð¾Ð±Ð½Ð¾Ðµ Ñ€ÑƒÐºÐ¾Ð²Ð¾Ð´ÑÑ‚Ð²Ð¾",
      author: 1,
      viewers: 213
    }
  ];
  this.setState(() => ({ blogs: blogss }));
}

render() {
  const { blogs } = this.state;
  return <h1>{blogs[0].title}</h1>;
}

reactjs

0 commentaires

4 Réponses :

1
votes

Cela fonctionne! Je me demande quel était le problème? Veuillez vérifier cet extrait de code!

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id='root'></div>

class App extends React.Component {

  render() {
    const blogs = [{
        "title": "Ð’ÑÐµÐ¼Ð¾Ð³ÑƒÑ‰Ð°Ñ Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ Query â€” Ð¿Ð¾Ð´Ñ€Ð¾Ð±Ð½Ð¾Ðµ Ñ€ÑƒÐºÐ¾Ð²Ð¾Ð´ÑÑ‚Ð²Ð¾",
        "author": 1,
        "viewers": 213
      },
      {
        "title": "Ð’ÑÐµÐ¼Ð¾Ð³ÑƒÑ‰Ð°Ñ Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ Query â€” Ð¿Ð¾Ð´Ñ€Ð¾Ð±Ð½Ð¾Ðµ Ñ€ÑƒÐºÐ¾Ð²Ð¾Ð´ÑÑ‚Ð²Ð¾",
        "author": 1,
        "viewers": 213
      }
    ]

    return (

      <
      h1 > {
        blogs[0].title
      } <
      /h1>
    )

  }
}

ReactDOM.render( < App / > , document.getElementById('root'));

1 commentaires

Veuillez jeter un oeil à la tâche éditée J'ai ce tableau d'objets pas dans la section de rendu

0
votes

Votre tableau d'état s'appelle blogs , mais vous déstructurez obj dans la méthode de rendu.

Puisque blogs [0] être indéfini pour le rendu initial, vous devez vérifier qu'il est défini avant d'essayer d'accéder à la propriété title à partir de celui-ci.

Exemple

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

class App extends React.Component {
  state = {
    blogs: []
  };

  componentDidMount() {
    this.setState({
      blogs: [
        {
          title: "Ð’ÑÐµÐ¼Ð¾Ð³ÑƒÑ‰Ð°Ñ Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ Query â€” Ð¿Ð¾Ð´Ñ€Ð¾Ð±Ð½Ð¾Ðµ Ñ€ÑƒÐºÐ¾Ð²Ð¾Ð´ÑÑ‚Ð²Ð¾",
          author: 1,
          viewers: 213
        },
        {
          title: "Ð’ÑÐµÐ¼Ð¾Ð³ÑƒÑ‰Ð°Ñ Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ Query â€” Ð¿Ð¾Ð´Ñ€Ð¾Ð±Ð½Ð¾Ðµ Ñ€ÑƒÐºÐ¾Ð²Ð¾Ð´ÑÑ‚Ð²Ð¾",
          author: 1,
          viewers: 213
        }
      ]
    });
  }

  render() {
    const { blogs } = this.state;

    return <h1>{blogs[0] && blogs[0].title}</h1>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

0 commentaires

0
votes

La méthode render est appelée la première fois juste après le montage, avant componentDidMount . Par conséquent, il essaiera de lire blogs [0] .title à partir de l'état initial qui ne contient aucun élément. Je vous conseille de restructurer votre rendu pour ressembler à quelque chose comme:

return blogs.map((elem) => <h1 key={elem.title}>elem.title</h1>);

De plus, au cas où vous auriez besoin de tout le tableau plus tard, vous pouvez faire quelque chose de similaire à ceci:

return <h1>{blogs[0] && blogs[0].title}</h1>;

0 commentaires

0
votes

Ajoutez le point d'interrogation après blogs [0] . Cela fonctionne pour moi.

Faites:

<h1>{blogs[0].title}</h1>;

au lieu de:

<h1>{blogs[0]?.title}</h1>;

0 commentaires