如何使用 JSON 数据定义状态（使用 react 和 axios）

Question

我对如何去做这件事有点困惑。所以我有一个名为 posts.json.

的 JSON 文件

 [ 
{
    "id": 1,
    "title": "Kylie Jenner",
    "content": "Social Media Public Figure",
    "disclaimer": "*Disclaimer: This user may have comment filtering turned on",
    "slug": "hello-world",
    "img" : "https://ilarge.lisimg.com/image/16801290/1080full-kylie-jenner.jpg",
    "banner" : "https://i.pinimg.com/originals/a5/2b/96/a52b963809c7e64e538b113cccf61dda.jpg",
    "handle": "kyliejenner",
    "handlelink" : "https://www.instagram.com/kyliejenner/"
}
]

我目前正在尝试向 API(url) 发出 GET 请求，该请求还包括我的 json 文件中的特定数据。在这种情况下，它将包括名人句柄。这是我在 Graphs.js.

上设置的

 export default class Graph extends Component {

constructor(props) {
  super(props);

}

state = {
  handle: '',
}


componentDidMount() {
axios.get('http://localhost:5000/celebs/' + handle)
.then(response => {
  this.setState({ celebs: response.data })
})
.catch((error) => {
  console.log(error);
})
}
}

我知道这是不对的，因为这是我被困的地方。 “+ handle”来自 json 文件。我想向 url 发出请求，其中 /handle 将直接匹配来自 json 文件的句柄，定义为“handle”：“@kyliejenner”。但是我一直收到一条错误消息，说 'handle' 未定义为 no-undef。无论我怎么做，我似乎都无法正确处理并不断出现相同的错误。

那么，我该如何使用传递给它的 json 文件中的数据来定义句柄呢？更具体地说是句柄数据。

如果不清楚，我提前道歉。如果您需要进一步说明，请告诉我。

Answer 1

您可以将 json 存储在不同的文件中，将数据分配给一个对象，然后您可以像这样导入它。

import posts from 'posts.js';

现在您可以访问组件中的帖子对象，因此您只需使用

即可访问它

const handle = posts[i].handle; //pass the index of array(i);

Answer 2

正如肖恩在评论中指出的那样，您所在的州有点不对。你应该这样声明：

constructor(props) {
  super(props);
  this.state = {handle: ''};
}

并像这样使用它：

axios.get('http://localhost:5000/celebs/' + this.state.handle)

或者，使用 Template Literals:

axios.get(`http://localhost:5000/celebs/${this.state.handle}`)

文档中的更多信息：https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class

如何使用 JSON 数据定义状态（使用 react 和 axios）

How to define a state with JSON data (using react and axios)

json

state

get-request

reactjs

axios