Question

我正在使用CDN进行反应

实际上我有两个JSON文件，

abc.json

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

reactjs.json

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

            }
    }
]

我实际上首先想要从第一个json文件中获取apiKey，然后在它的帮助下，我想获取src的值

1）如何在使用axios的React中做到这一点？ 2）是否可以直接从reactjs.json获取src？如果是，那么如何？

我尝试过，但是却给出了错误。

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 
 })
}

如何将prop的值存储在变量中，然后在react中访问它？

1 个答案: