Question

我从我想在我的React组件'Club'中使用的JSON获取一些俱乐部信息。我创建了一个组件ClubList，其中应创建所有具有相应名称的Club组件，但我不知道在哪里发出HTTP请求以及将其保存在哪里，因此可以在return语句中使用它。

我尝试将所有标题保存在数组中，但在必须将标题传递给每个Club元素的那一刻我停了下来。我刚开始使用ReactJS，所以我是ReactJS的基本入门者（虽然不是JS）。

这是ClubList类

class ClubList extends React.Component {

  render() {
      return (
      <div className="Clublist">
        <Club title="Club1" />
        <Club title="Club2" />
        ...
        ...
        ...
      </div>
      )
  }
}

那是俱乐部班级

  class Club extends React.Component {
     clubProp = {...}

     render() {
        return (
           <div className="Club">
              <div className="image-container">
                 <img src={this.clubProp.imageSrc} width="300px" height="300px"/>
              </div>
              <h2>{this.clubProp.name}</h2>
              <div className="Business-information">
                <div className="Business-address">
                    <p>{this.clubProp.address}</p>
                    <p>{this.clubProp.city}</p>
                    <p>{this.clubProp.zipCode}</p>
                </div>
              <div className="Business-reviews">
                    <h3>{this.clubProp.category}</h3>
                    <h3 className="rating">{this.clubProp.rating}</h3>
                    <p>90 reviews</p>
                </div>
            </div>
        </div>
    )
  }
}

我将使用API获取俱乐部名称，但是我不知道如何组织变量以在正确的位置进行访问，因为我不太了解React的作用域。我已经有准备好JSON的代码，只需要知道放在哪里以及如何在其中传递值

Answer 1

您应该在哪里提出API请求？

理想情况下，在发出API请求时，我们使用redux-sagas或redux-thunk作为中间件。但是，由于您才刚刚入门，因此可以在componentDidMount组件的ClubList生命周期方法中进行API调用。

现在，我假设您收到一个Club数组。您可以映射到此数组并呈现每个Club组件。

您应该在哪里存储这些数据？

常见做法是将带有redux之类的状态管理库与react一起使用。它有助于更好地扩展和维护您的应用程序。但是，您也可以使用state组件的ClubList来存储API调用的数据。

我希望这会有所帮助。

Answer 2

您的基本语法如下所示。您的组件将使用组件状态维护俱乐部。在componentDidMount生命周期函数中，您可以进行api调用，然后将结果存储在组件的状态中。每次调用setState时，组件都会重新渲染。

class ClubList extends React.Component {
  state = {
    clubs: []
  };

  componentDidMount = async () => {
    const clubs = await this.fetchClubs();
    this.setState({ clubs });
  }

  render() {
    const { clubs } = this.state;
    return (
      <div className="Clublist">
        {clubs.map(club => (
          <Club title={club.title} />
        )}
      </div>
    );
  }
}

最终，您可以从所有组件中退出状态管理，并使用类似redux或MobX之类的功能，并使您的组件仅专注于呈现html。

Answer 3

在文档中，您可以在componentDidMount生命周期方法中进行API调用。我建议查看文档以获取示例：

https://reactjs.org/docs/faq-ajax.html

文档使用浏览器的fetch方法发出请求，但我个人建议使用axios。 https://www.npmjs.com/package/axios，因为它更直接了。

Answer 4

React使用状态，该状态可以通过组件树向下传递。在使用类组件时，使JSON数据进入应用程序状态的典型方法是在顶级组件的componentDidMount() lifecyle方法中获取数据，然后在获取中运行this.setState({clubProp: result.data}) / axios回调。您可以将其传递给可以作为道具的儿童。

我认为Redux是过大的-最好将学习推迟到出现状态管理问题之前。新的挂钩实现和上下文API还将更改状态管理的最佳实践。创建Redux的人说：“助焊剂库就像眼镜：您会在需要时知道它们。”

Answer 5

//这是简化的示例：

class ClubList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            ClubDetails: [],
        };
    }
    componentDidMount() {
        fetch("api link put here in quotes")
                .then(results => {
                    return results.json();
                }).then(data => {
                    let ClubDetails = data;
                    this.setState({ ClubDetails: ClubDetails });
                })
    }
    render() {
        const ClubDetails = this.state.ClubDetails;
        const listItems = ClubDetails.map((clubProp,index) =>
              <Club key={index}  clubProp={clubProp}/>
        );
        return (
            {listItems}
          );
    }
  }
class Club extends React.Component {
    render() {
       return (
          <div className="Club">
             <div className="image-container">
                <img src={this.clubProp.imageSrc} width="300px" height="300px"/>
             </div>........

Answer 6

我的建议是在redux中使用获取中间件来控制props中的所有数据（您可以在redux github示例中找到），除了响应数据之外，您还可以监视组件之间的获取状态。

创建组件时如何以及在何处传递JSON数据作为道具

6 个答案: