Question

我是初学者，正在尝试将react应用编写为练习

我希望看到这样的东西：https://github.com/aneagoie/robofriends 但这给了我这个错误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;

不知道出了什么问题

Answer 1

问题似乎出在componentDidMount的功能中。

您尝试在该函数中设置in，但是没有执行this.setState，而是执行了this.state。

这应该是这样的：

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

此外，当您尝试设置状态时，在该componentDidMount函数中，这里没有定义robot的地方。...因此，robot的值将是未定义的。

让我知道是否需要澄清。

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

1 个答案: