为什么此代码不运行，而是向我发送此错误：（未处理的拒绝（类型错误）：this.state 不是函数）

Question

I am a beginner a was trying to code a react app as an exercise

i am expecting to see some thing like this : https://github.com/aneagoie/robofriends but it give me this error Unhandled Rejection (TypeError): this.state is not a function (anonymous function)

import React, {Component} from 'react';
import SearchBox from './SearchBox'; 
import CardList from './CardList';
import './App.css'
import { robot } from './robot';



class App extends  Component {
constructor(){
    super()
    this.state = {
        robot: [],
        searchField: ''
    }
}


componentDidMount(){
    fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json())
    .then(users => {this.state({robot:robot})})
}

onSearchChange = (event) => { 
    this.setState({ searchfield: event.target.value})
}

render(){
    const filteredrobots = this.state.robot.filter(
        robot =>{
        return robot.name.includes(this.state.searchfeild)})

    return(<div className ='tc'>
        <h1>robot friends</h1>
        <SearchBox searchChange = {this.onSearchChange}/>
        <CardList robot = {filteredrobots}/></div>)
}
}


export default App;

dont understand what is going wrong thanks in advance

Answer 1

It seems like the issue is in the function of componentDidMount .

You tried setting the in that function but instead of doing this.setState, you did this.state.

This is how it should be:

componentDidMount(){
    fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json())
    .then(users => {this.setState({robot:robot})})
}

Also, when you try setting the state, it here in that componentDidMount function, I don't see anywhere that robot is defined.... So the value of robot will be undefined.

Let me know if you need clarification.