Блог

пожалуйста, в настоящее время я создаю простой пользовательский интерфейс, используя react на codesandbox. Я просто хочу, чтобы пользователь мог вводить конечную точку API в текстовое поле и отображать выходные данные (данные ответа) в текстовой области. Ниже приведена ссылка на мой проект codesandbox: https://codesandbox.io/s/dry-surf-6ygc5?file=/src/components/PostList.jsx . Ваш вклад будет высоко оценен!

Похоже, что вы пропустили целевое значение входного текста в событии onChange для ввода. Пожалуйста, посмотрите приведенный ниже код, если это поможет.

  <input
            name="inputApi"
            onChange={(e) => this.setState({ apiText: e.target.value })}
            type="text"
          />
 

Я удалил немного вашего кода. Также я не выполнял другие функции, такие как обработка ошибок. Пожалуйста, добавьте блок try catch в асинхронный блок

 submitHandler = async (e) => {
        e.preventDefault();
        try {
          const resp = await axios.get(
            `https://jsonplaceholder.typicode.com/${this.state.apiText}`
          );
          // console.log(resp.data);
    
          this.setState({ posts: resp.data });
        } catch (error) {
          this.setState({ errorMsg: error.message });
        }
      };
 

Полный код приведен ниже.

 import React, { Component } from "react";
import axios from "axios"; //for making API calls

class PostList extends Component {
  constructor(props) {
    super(props);

    /**
     * the lines below are unneccessary
     * as the functions are arrow functions
     * and require no binding
     * value={this.state.api}
     */

    this.state = {
      posts: [],
      errorMsg: "",
      api: {},
      apiText: ""
    };
  } //end of constructor

  submitHandler = async (e) => {
    e.preventDefault();
    try {
      const resp = await axios.get(
        `https://jsonplaceholder.typicode.com/${this.state.apiText}`
      );
      // console.log(resp.data);

      this.setState({ posts: resp.data });
    } catch (error) {
      this.setState({ errorMsg: error.message });
    }
  };

  render() {
    const { posts, errorMsg } = this.state; //destructure the state object
    //console.log(res.data);
    return (
      <div>
        <form onSubmit={this.submitHandler}>
          <input
            name="inputApi"
            onChange={(e) => this.setState({ apiText: e.target.value })}
            type="text"
          />
          <input type="submit" />
        </form>
        List of Posts: {posts.length}
        {posts.length ? (
          <div>
            <textarea value={this.state.posts[0].title} readOnly />
          </div>
        ) : null}
        {errorMsg ? <div>{errorMsg}</div> : null}
      </div>
    ); //endOfReturn
  } //endOfRender
} //endOfPostList
export default PostList;

/**posts.map((post) => <div key={post.id}>{post.title}</div>)*/
 

У вас небольшая ошибка при получении значения в вашем submitHandler .

Вместо введенного пользователем значения вы передаете строку "e.target.value" , что неверно.

 const resp = axios.get("e.target.value");
 

Вместо этого используйте его так

 const inputLink = e.target[0].value;
const resp = axios.get(inputLink);
 

Также нет смысла сохранять результат вызова axios.get функции в компоненте state .
Сразу после вызова вы можете использовать then и перехватить результат вызова axios.get

 axios
    .get(inputLink)
    .then((res) => {
        this.setState({ posts: res.data });
    })
    .catch((error) => {
        this.setState({
            errorMsg: "error retrieving data"
        });
    });
 

Таким образом, минимальный рабочий компонент будет выглядеть примерно так.