Невозможно нацелить подчиненное свойство объекта JSON в реакции, хранящегося в состоянии в методе рендеринга. - PullRequest
Новая
       7

Невозможно нацелить подчиненное свойство объекта JSON в реакции, хранящегося в состоянии в методе рендеринга.

0 голосов
/ 08 января 2020

Я загружаю JSON данные из Contentful (CMS без головы). Данные поступают идеально, без проблем. Я могу сделать что угодно с данными, а также настроить их свойства. Однако, когда в методе рендеринга я не могу нацелить эти данные за уровень объекта состояния. Например, я могу настроить таргетинг на this.state.story, но не могу указать таргетинг this.state.story.sys.id в методе рендеринга или в самом JSX. Пожалуйста, смотрите следующий код: 

class Story extends Component {
 constructor(props) {
 super(props);
   this.state = {
     story: [],
     relatedStories: [],
     sid: this.props.sid,
     newSid: ""
   };
  }
componentDidMount() {
 const client = require("contentful").createClient({
  space: "xxx",
  accessToken: "xxxxxxxxxxxxxxxxxxxx"
});
const getStory = async () => {
  console.log("getting the story");
  const story = await client.getEntry(this.state.sid);

  if (story) {
    console.log("got the story: ");
    this.setState([story]);
    return;
  }
  console.log(`Error getting Entries for ${this.state.sid}.`);
};

const getRelatedStories = async () => {
  let relatedStories = await client.getEntries({
    content_type: "story",
    "fields.tags[all]": "boating"
  });
  this.setState([...relstories.items]);
};
getStory();
getRelatedStories();
console.log(this.state);
}


render() {
// I am not able to target beyond this.state.story
console.log(this.state.story);//works. this returns a json object that has sys.id properties
console.log(this.state.story.sys.id) //returns TypeError: Cannot read property 'sys' of undefined
console.log(this.state.relatedStories);
return (
  <Layout meta={meta}>
    <div className="bg-primary">
      <ul>
        {this.state.story.map(s => (
          <li>{s.sys.id}</li>
        ))}
      </ul>
    </div>
   </Layout>
  );
 }
}

Вот пример JSON, который возвращается из Contentful: 

{ 
 "sys":{ 
  "space":{  },
  "id":"1DF3FzEtJkeG9Xfuhq01SG",
  "type":"Entry",
  "createdAt":"2019-12-20T21:17:03.735Z",
  "updatedAt":"2020-01-03T10:36:59.844Z",
  "environment":{  },
  "revision":4,
  "contentType":{  },
  "locale":"en-US"
 },
 "fields":{  }
 }

Ответы [ 2 ]

0 голосов
/ 08 января 2020

На самом деле, я думаю, что оба ваших setState() требуют доработки, так как, похоже, существует несоответствие типов. 

const getStory = async () => {
  console.log("getting the story");
  const story = await client.getEntry(this.state.sid);

  if (story) {
    console.log("got the story: ");
    this.setState({
      story: [{ ...story }],
    });
    return;
  }
  console.log(`Error getting Entries for ${this.state.sid}.`);
};

const getRelatedStories = async () => {
  let relatedStories = await client.getEntries({
    content_type: "story",
    "fields.tags[all]": "boating"
  });
  this.setState({ 
    relatedStories: [...relstories.items],
  });
};

Вы должны назначать ответы на оба запроса соответствующим свойствам в вашем состояние.

0 голосов
/ 08 января 2020

Измените свой getStory setState на это: 

if (story) {
    console.log("got the story: ");
    this.setState({story: [story]});
    return;
  }

То, как вы это делали, переписывало все ваше состояние массивом, включающим историю.

...