Реагируйте: Когда рендерится API JSON, снова извлекайте контент из строки URL

Question

Название может вводить в заблуждение.

По сути, у меня есть документ JSON. И одна строка имеет URL. В этом URL есть больше строк. Таким образом, план состоит в том, чтобы сделать это тоже.

JSON 1 (https://example.com/api/):

"results": [
    {
      "id": 1,
      "name": "Test 1",
      "url": "https://example.com/api/user",
     }
]

JSON в "URL" из JSON 1 (https://example.com/api/user):

"websites": [
        {
          "id": 1,
          "owner": "David"
         }
    ]

Так что проблема в том, что я могу отрендерить все с первой выборки. Но мне нужно визуализировать " владельца " из второго JSON.

А вот как у меня построен компонент:

export class CharacterList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            users: []
        }
    }

    componentDidMount() {
        fetch('https://example.com/api/')
            .then(res => res.json())
            .then(json => {
                this.setState({
                    users: json
                })
            });
    }

И рендеринг. Там, где написано OWNER = "DAVID" , мне нужно отобразить содержимое из строки "owner" во втором JSON, извлеченной из первых данных json ("url"). Я не могу понять это. Я могу сделать user.name без проблем.

render() {
        const { users } = this.state;
            return(
                <React.Fragment>
                <ul>
                    {users.results.map(user => (
                        <li key={user.id}>
                            <p>{user.name}</p>
                            <p>{OWNER="DAVID"}</p>
                        </li>
                        ))}
                </ul>
                </React.Fragment>
                );
    }

Спасибо за вашу помощь!

Answer 1

Ну, это немного сложно, так как есть два разных API, а также, если вы действительно хотите отобразить имя каждого владельца, тогда это требует много выборок и большого времени отклика. Я бы посоветовал, если возможно, подумать о перестановке двух структур JSON.

Тем не менее, вот подходящее решение вашей проблемы:

...
fetchUserData = async (url) => {
   const userData = await fetch(url);
   return userData;
}

// render
...
<ul>
   {users.results.map(async user => {
      const userData = await this.fetchUserData(user.url);
      return (
         <li key={user.id}>
            <p>{user.name}</p>
            <p>{userData[0].owner}</p>
         </li>
      );
   })}
</ul>

Если у каждого пользователя может быть более одного веб-сайта, так как веб-сайтов - это массив, то вам следует повторить и это. Решение выше показывает только имя первого пользователя текущего пользователя.