如何创建将在 ReactJS 中搜索 REST API 的搜索组件

Question

我正在尝试创建一个组件，该组件将通过 axios 请求搜索 REST API，然后返回结果列表。现在，我面临一个问题，当我搜索时得到的只是“未定义”，我不知道为什么。任何和所有的建议都会很棒。

Users.js

import React, { Component } from 'react';
import axios from 'axios';
import { search } from './utils';
import Users from './UsersDelete';

class App extends Component {
  state = {
    users: null,
    loading: false,
    value: ''
  };

  search = async val => {
    this.setState({ loading: true });
    const res = await search(
      `https://zuul-stage.whatifops.com/v1/user/email/${val}`
    );
    const users = await res.data.results;

    this.setState({ users, loading: false });
  };

  onChangeHandler = async e => {
    this.search(e.target.value);
    this.setState({ value: e.target.value });
  };

  get renderUsers() {
    let users = <h1>There's no movies</h1>;
    if (this.state.movies) {
      users = <Users list={this.state.users} />;
    }

    return users;
  }

  render() {
    return (
      <div>
        <input
          value={this.state.value}
          onChange={e => this.onChangeHandler(e)}
          placeholder='Type something to search'
        />
        {this.renderUsers}
      </div>
    );
  }
}

export default App;

用户.js

import React from 'react';
import { truncStr } from './utils';

const User = props => {
  const { id, email, phone } = props.item;

  return (
    <div className={classes.Container}>
      <div className={classes.VoteContainer}>
        <span className={classes.Vote}>{email}</span>
      </div>

      <div className={classes.Bottom}>
        <h3 className={classes.Title}>{truncStr(phone, 19)}</h3>
      </div>
    </div>
  );
};

export default User;

UsersDelete.js

import React from 'react';
import User from './User';

const Users = ({ list }) => {
  let cards = <h3>Loading...</h3>;

  if (list) {
    cards = list.map((m, i) => <User key={i} item={m} />);
  }

  return (
    <div>
      <div>{cards}</div>
    </div>
  );
};

export default Users;

utils.js

import axios from 'axios';

export const truncStr = (string, limit) => {
  return string.length > limit
    ? string
        .trim()
        .substring(0, limit - 3)
        .trim() + '...'
    : string;
};

const resources = {};

const makeRequestCreator = () => {
  let cancel;

  return async query => {
    if (cancel) {
      // Cancel the previous request before making a new request
      cancel.cancel();
    }
    // Create a new CancelToken
    cancel = axios.CancelToken.source();
    try {
      if (resources[query]) {
        // Return result if it exists
        return resources[query];
      }
      const res = await axios(query, { cancelToken: cancel.token });

      const result = res.data.results;
      // Store response
      resources[query] = result;

      return result;
    } catch (error) {
      if (axios.isCancel(error)) {
        // Handle if request was cancelled
        console.log('Request canceled', error.message);
      } else {
        // Handle usual errors
        console.log('Something went wrong: ', error.message);
      }
    }
};
};

export const search = makeRequestCreator();

**更新：这是我在搜索功能后调用 console.log(res) 后的响应信息

Answer 1

您的代码有一些问题：

• 从 REST API 返回的数据中没有 results 属性
• 您不需要在此行await：const users = await res.data.results;
• 您所在的州没有 movies 属性

我创建了一个代码框来测试您的解决方案，这里是一个更新版本：https://codesandbox.io/s/async-browser-tz4p6

我从User.js 文件中删除了一些不必要的东西（对于我的测试）