Как сохранить значение prop в переменной, а затем получить к нему доступ?

Question

Я использую cdn для реакции

На самом деле у меня есть два JSON FILE,

abc.json

[
    {
      "apiKey":"642176ece1e7445e99244cec26f4de1f"
    }
]

reactjs.json

[
    {
        "642176ece1e7445e99244cec26f4de1f": {
                "src": "image_1.jpg",
                "id" : "1"

            }
    }
]

Я действительно хочу, чтобы в первую очередь я получил apiKey из первого файла json, а затем с помощью него я хотел бы получить значение src

1) Как я могу сделать это в React, используя axios?2) Возможно ли, что мы можем напрямую получить src изactjs.json?Если да, то как?

Что я пробовал, но выдает ошибку ..

class FetchDemo extends React.Component {
        constructor(props) {
          super(props);

          this.state = {
          images: [],
          api:[]
          };

          //this.listImages = this.listImages.bind(this);
        }

        componentDidMount() {
          axios.get('abc.json').then(res => {
            console.log(res);
            this.setState({ api: res.data });
          });
          axios.get('reactjs.json').then(res => {
            console.log(res);
            this.setState({ images: res.data });
          });
        }

        render() {
          return (
            <div>
              {this.state.api.map((api, index) => (
                <Pictures key={index} apikeys={api.apiKey} />
              ))}
            </div>
          );
        }

      }

      class Pictures extends React.Component {
        render() {
          return (
            <h1>
              alt={this.props.apikeys}
            </h1>
            {this.state.images.map((images, index) => (
                <h1 key={index}> apikeys={images.+`{this.props.apikeys}`+.src} </h1>
//Error at this point
            ))}
          );
        }
      }

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

Answer 1

Используя axios вы делаете запрос.Это означает, что ваш JSON будет обслуживаться с конечной точки.Если вам действительно требуется такой файл json, попробуйте импортировать

import abc from './abc.json';

componentDidMount = () => {
 this.setState({
 json: abc 
 })
}