Question

我遇到了这个问题 TypeError: undefined is not a function 并且我没有发现错误，这是我的代码。
为了清楚起见，我已经包含了该组件的完整代码

import React, {Component, useState,useEffect} from "react";

function Counter() {
    const [searchTerm, setSearchTerm] = useState("");
    const[materiel,setMateriels]=useState([]);
    useEffect(() => {
        fetch("http://localhost:5000/materiels")
            .then((res) => res.json())
            .then((data) => {
                setMateriels(data);
                console.log(materiels);
            })
            .catch(console.log);
    }, []);
}


class searchMateriel extends Component {

    render() {
        return (

            <div className="container">
                <div className="col-xs-12">
                    <input type="text" placeholder="Search..." onChange={event => {
                        this.setState({searchTerm: event.target.value});
                    }}/>
                    {this.state.materiels
                        .filter((val) => val.nom.startsWith(this.statesearchTerm))
                        .map((val, key) => {
                            return (
                                <div className="user" key={{key}}>
                                    <p>{val.nom}</p>
                                </div>
                            );
                        })}
                </div>
            </div>
        );
    }

    state = {
        materiels: [],
        searchTerm: "",
    }


    componentDidMount() {
        fetch('http://localhost:5000/materiels')
            .then(res => res.json())
            .then((data) => {
                this.setState({materiels: data})
                console.log(this.state.materiels)
            })
            .catch(console.log)
    }
}

export default searchMateriel;

我已经更新了代码，但仍然无法正常工作。它显示此错误

Line 11:29:  'materiels' is not defined

错误在我代码的最后一行，有人知道吗？提前致谢

Answer 1

你的代码/用例是错误的，在这段代码中 Counter 是一个函数组件，所以 React 除了返回一些 JSX 的...... 由于 Counter 没有返回任何内容，因此您未定义，然后您想访问 setSearchTerm 方法...基本上，您将收到 undefined is not a function react js 错误。

要将输入值存储在状态中，您可以将父 setState 传递给子级或在其中定义状态。

注意：如果你只是想把你的状态存储在另一个地方并处理它，你可以使用钩子。

Answer 2

上面代码中的Counter只是一个函数，实际上什么都不返回。 Counter 也没有您尝试访问的 setSearchTerm 方法。您不能在功能组件的顶层之外使用钩子或钩子 see docs 当您使用基于类的组件时，您应该使用 setState 方法来更新您的状态或切换到功能组件并使用 useState hook 我在您的代码中没有看到任何使用 searchTerm 的情况，但我假设您将向过滤器函数添加一个函数。

class searchMateriel extends Component {
  render() {
    return (
      <div className="container">
        <div className="col-xs-12">
          <input
            type="text"
            placeholder="Search..."
            onChange={(event) => {
              this.setState({ searchTerm: event.target.value });
            }}
          />
          {this.state.materiels
            .filter((val) => val.nom.startsWith(this.statesearchTerm))
            .map((val, key) => {
              return (
                <div className="user" key={{ key }}>
                  <p>{val.nom}</p>
                </div>
              );
            })}
        </div>
      </div>
    );
  }

  state = {
    materiels: [],
    searchTerm: "",
  };

  componentDidMount() {
    fetch("http://localhost:5000/materiels")
      .then((res) => res.json())
      .then((data) => {
        this.setState({ materiels: data });
        console.log(this.state.materiels);
      })
      .catch(console.log);
  }
}

export default searchMateriel;

另外，我想提一下，在基于类的组件中，当您使用 setState 时，状态会被合并，但是当您使用 useState 时，钩子状态被完全替换

如果您想用功能组件替换基于类的组件，它可能如下所示：

const searchMateriel = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [materiels, setMateriels] = useState([]);

  useEffect(() => {
    fetch("http://localhost:5000/materiels")
      .then((res) => res.json())
      .then((data) => {
        setMateriels(data);
        console.log(materiels);
      })
      .catch(console.log);
  }, []);

  return (
    <div className="container">
      <div className="col-xs-12">
        <input
          type="text"
          placeholder="Search..."
          onChange={(event) => {
            setSearchTerm(event.target.value);
          }}
        />
        {materiels
          .filter((val) => val.nom.startsWith(searchTerm))
          .map((val, key) => {
            return (
              <div className="user" key={{ key }}>
                <p>{val.nom}</p>
              </div>
            );
          })}
      </div>
    </div>
  );
};

export default searchMateriel;

有关 useEffect 的更多信息，您可以阅读here

Answer 3

看到您没有在构造函数中定义state。这可能是原因。构造函数在安装组件之前加载。 https://reactjs.org/docs/react-component.html#constructor

反应：“类型错误：未定义不是函数”

3 个答案: