javascript - React - 将用户添加到收藏夹列表

Question

我有一个简单的用户列表，其中包含以下 api 的一些详细信息：https ://gorest.co.in/public-api/users ，我想将选定的用户添加到收藏夹列表中。我正在使用 react-router 在页面之间导航。React 可以做到这一点，还是我还需要 Redux？

我在这里有一个完整的现场示例，其中包含用户页面和收藏夹。

下面是用户列表的代码：

import React from "react";
import axios from "axios";

import NavLinks from "./components/navLink";

export default class UserList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      list: [],
      addToFav: false
    };
    this.list = [];
  }

  componentDidMount() {
    this.getList();
  }

  /* get users list */
  getList = async () => {
    const api =
      "https://gorest.co.in/public-api/users?_format=json&access-token=3qIi1MDfD-GXqOSwEHHLH73Y3UitdaFKyVm_";

    await axios
      .get(api)
      .then(response => {
        this.list = response.data.result;
        this.setState({
          list: this.list
        });
      })
      .catch(err => {
        console.log(err);
      });
  };

  addToFav = () => {
    this.setState(
      {
        addToFav: !this.state.addToFav
      },
      () => console.log(this.state.addToFav)
    );
  };

  render() {
    let style = {
      display: "grid",
      gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))",
      padding: "1rem",
      gridGap: "1rem 1rem"
    };

    return (
      <div>
        <NavLinks />
        <ul style={style}>
          {this.state.list.map(user => {
            return (
              <li key={user.id}>
                <div>
                  <img className="thumb" alt="" src={user._links.avatar.href} />
                </div>

                <div className="userInfo">
                  <p>
                    {user.first_name} {user.last_name}
                  </p>
                </div>
                <button onClick={this.addToFav}>Add to Favorites</button>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

谢谢！

标签： javascriptreactjs

Answer 1

这是一个有效的代码框： https ://codesandbox.io/s/brave-fire-4kd4p

这一思路几乎遵循@Chris G 提到的内容。拥有一个包含用户列表和收藏夹列表的顶级状态。然后将它们作为道具传递给各个组件。

应用程序.js

在此处而不是在 UserList 组件中点击您的 API，以防止任何不必要的重新渲染。

import React, { Component } from "react";
import UserList from "./userList";
import FavoriteList from "./favoriteList";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import axios from "axios";

export default class App extends Component {
  state = {
    list: [],
    favorites: []
  };

  addFavorite = favorite => {
    const { favorites } = this.state;

    if (!favorites.some(alreadyFavorite => alreadyFavorite.id == favorite.id)) {
      this.setState({
        favorites: [...this.state.favorites, favorite]
      });
    }
  };

  getList = async () => {
    const api =
      "https://gorest.co.in/public-api/users?_format=json&access-token=3qIi1MDfD-GXqOSwEHHLH73Y3UitdaFKyVm_";

    await axios
      .get(api)
      .then(response => {
        this.setState({
          list: response.data.result
        });
      })
      .catch(err => {
        console.log(err);
      });
  };

  componentDidMount() {
    this.getList();
  }

  render() {
    return (
      <Router>
        <Switch>
      <Route
        path="/"
        exact
        render={() => (
          <UserList list={this.state.list} addFavorite={this.addFavorite} />
        )}
      />
      <Route
        path="/favorites"
        render={() => <FavoriteList favorites={this.state.favorites} />}
      />
    </Switch>
  </Router>
);

} }

用户列表.js

在按钮单击时调用addFavorite事件处理程序以将该项目传回父状态。

import React from "react";

import NavLinks from "./components/navLink";

export default class UserList extends React.Component {
  render() {
    let style = {
      display: "grid",
      gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))",
      padding: "1rem",
      gridGap: "1rem 1rem"
    };

    return (
      <div>
        <NavLinks />
        <ul style={style}>
          {this.props.list.map(user => {
            return (
              <li key={user.id}>
                <div>
                  <img className="thumb" alt="" src={user._links.avatar.href} />
                </div>

                <div className="userInfo">
                  <p>
                    {user.first_name} {user.last_name}
                  </p>
                </div>
                <button onClick={() => this.props.addFavorite(user)}>
                  Add to Favorites
                </button>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

收藏夹.js

使用favorites作为道具传入的数组并对其进行迭代。

import React from "react";

import NavLinks from "./components/navLink";

export default class FavoriteList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

  render() {
    const { favorites } = this.props;
    return (
      <div>
        <NavLinks />
        <ul>
          {favorites.map(user => {
            return (
              <li key={user.id}>
                <div>
                  <img className="thumb" alt="" src={user._links.avatar.href} />
                </div>

                <div className="userInfo">
                  <p>
                    {user.first_name} {user.last_name}
                  </p>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}