Question

class UserList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data : [],
    };
  }

  componentDidMount() {
    fetch(' https://reqres.in/api/unknown')
      .then(res => res.json())
      .then((result) => {
        this.setState({
          data: result.data,
        });
      },
      );
  }

  render() {
    const { data } = this.state;

    return (
   <div>
    {data.map(datalist => (
      <p>
      {datalist.id} - {datalist.name} - {datalist.year} - {datalist.color} - {datalist.pantone_value}
      </p>
    ))}
   </div>

仅显示这些括号之间的产品。就像这样。

 {
  items: [
    { id: 1, name: 'Apples', price: '$2' },
    { id: 2, name: 'Peaches', price: '$5' }
  ] 
}

但我不能在这些括号之间显示产品。示例： https://jsonplaceholder.typicode.com/posts

 [
  { id: 1, name: 'Apples', price: '$2' },
  { id: 2, name: 'Peaches', price: '$5' }
 ]

我该怎么做？谢谢。

Answer 1

使用端点https://jsonplaceholder.typicode.com/posts中的数据您只需要使用响应而不是response.data，因为端点直接发送数组而不是将其包装在数据键中。

您需要将setState更改为

     this.setState({
          data: result,
        });

如何在React中发出AJAX请求？

1 个答案: