Json 如何在变量中存储prop的值,然后在react中访问它?
我正在使用cdn进行react 实际上我有两个JSON文件 abc.jsonJson 如何在变量中存储prop的值,然后在react中访问它?,json,ajax,reactjs,axios,Json,Ajax,Reactjs,Axios,我正在使用cdn进行react 实际上我有两个JSON文件 abc.json [ { "apiKey":"642176ece1e7445e99244cec26f4de1f" } ] reactjs.json [ { "642176ece1e7445e99244cec26f4de1f": { "src": "image_1.jpg", "id" : "1"
[
{
"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")
);
您正在使用axios发出请求。这意味着您的JSON将从一个端点提供。如果确实需要以这种方式使用json文件,请尝试导入
import abc from './abc.json';
componentDidMount = () => {
this.setState({
json: abc
})
}
你在用网页包吗?如果是这样的话,您可以直接导入JSON文件。JSON也是包含一个对象的数组。看起来你可以直接把它们变成对象,让自己更容易。我实际上想要的是,首先,我从第一个json文件中获取apiKey,然后在它的帮助下,我想要得到srcI的值,我正在使用cdn进行反应。我实际上想要的是,首先,我从第一个json文件中获取apiKey,然后在它的帮助下我想从第二个json文件中获取src的值