时间戳

首页 > 解决方案 > 输入中的自动完成数据

javascript - 输入中的自动完成数据

问题描述

我想在输入中显示来自自动完成的数据，如下所示：

自动完成功能

当我试图这样做时，我得到一个错误：

× TypeError: 无法读取未定义 onSelect 的属性“setState”

94 | onSelect={ value => this.setState({ value }) }

我坚持这一点，我可能做错了。希望有人可以帮助我，因为我已经尝试了我所知道的一切，只是看不到问题所在。所以请帮助我:)

私人电影.js

import React, { useState, useEffect, setState } from "react";
import Layout from "../core/Layout";
import axios from "axios";
import { isAuth, getCookie, signout, updateUser } from "../auth/helpers";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.min.css";
import Autocomplete from "react-autocomplete";
import { MoviesData, renderMovieTitle } from "./movie-data";

const Private = ({ history }) => {
  const [values, setValues ] = useState({
    value: "",
    suggestions: [],
    movie: "",
    buttonText: "Submit"
  });

  const token = getCookie("token");

  useEffect(() => {
    loadProfile();
  }, []);

  const loadProfile = () => {
    axios({
      method: "get",
      url: `${process.env.REACT_APP_API}/user/${isAuth()._id}`,
      headers: {
        Authorization: `Bearer ${token}`
      }
    })
      .then(response => {
        console.log("PRIVATE PROFILE UPDATE", response);
        const { movie } = response.data;
        setValues({ ...values, movie });
      })
      .catch(error => {
        console.log("PRIVATE PROFILE UPDATE ERROR", error.response.data.error);
        if (error.response.status === 401) {
          signout(() => {
            history.push("/");
          });
        }
      });
  };

  const { movie, buttonText } = values;

  const handleChange = value => event => {
    // console.log(event.target.value);
    setValues({ ...values, [value]: event.target.value });
  };

  const clickSubmit = event => {
    event.preventDefault();
    setValues({ ...values, buttonText: "Submitting" });
    axios({
      method: "POST",
      url: `${process.env.REACT_APP_API}/movie/create`,
      headers: {
        Authorization: `Bearer ${token}`
      },
      data: { movie }
    })
      .then(response => {
        console.log("PRIVATE PROFILE UPDATE SUCCESS", response);
        updateUser(response, () => {
          setValues({ ...values, buttonText: "Submitted" });
          toast.success("Profile updated successfully");
        });
      })
      .catch(error => {
        console.log("PRIVATE PROFILE UPDATE ERROR", error.response.data.error);
        setValues({ ...values, buttonText: "Submit" });
        toast.error(error.response.data.error);
      });
  };

  const updateForm = () => (
    <form>
      <div className="form-group">
        <label className="text-muted">AUTOCOMPLETE</label>
        <Autocomplete
        type="text"
          getItemValue={item => item.title}
          items={MoviesData()}
          shouldItemRender={renderMovieTitle}
          renderItem={(item, isHighlighted) => (
            <div style={{ background: isHighlighted ? "lightgray" : "white" }}>
              {item.title}
            </div>
          )}
          onChange={(event, value) => this.setState({ value }) }
          onSelect={ value => this.setState({ value }) }
        />
        <input
          onChange={handleChange("movie")}
          value={movie}
          type="text"
          className="form-control"
        />
      </div>
      <div>
        <button className="btn btn-primary" onClick={clickSubmit}>
          {buttonText}
        </button>
      </div>
    </form>
  );

  return (
    <Layout>
      <div className="col-md-6 offset-md-3">
        <ToastContainer />
        <h1 className="pt-5 text-center"></h1>
        <p className="lead text-center"></p>
        {updateForm()}
      </div>
    </Layout>
  );
};

export default Private;

标签： javascriptreactjsautocompleteaxios

解决方案

我想你把它弄混了。

相反，您调用 this.setState()

调用你的破坏函数 setValues()

您在组件函数开头声明的内容

 const [values, setValues ] = useState({
    value: "",
    suggestions: [],
    movie: "",
    buttonText: "Submit"
  });

如果你使用“useState”并在“getValues”和“setValues”中破坏它，你可以在你的导入中去掉setState。

请参阅文档：

https://reactjs.org/docs/hooks-state.html

推荐阅读