Question

我正在获取./src/App.js第27行：“ Items”未定义react / jsx-no-undef 试图将状态传递给另一个组件时

import React, { Component } from 'react';
import axios from 'axios'

class App extends Component {
    // Added this:
    constructor(props) {
        super(props);
        // Assign state itself, and a default value for items
        this.state = {
            items: []
        };

    }
    componentWillMount() {
        axios.get('https://api.opendota.com/api/proMatches').then(res => {
        this.setState({ items: res.data });

        });
    }
    render() {

        return (
            <div className="app">
            <Items items={this.state.items} />  
            </div></blink></blink>
        );
    }
}

export default App;

Answer 1

您不会在未首先导入的情况下尝试使用名为Items的组件：

<Items items={this.state.items} />

您使用的每个组件都必须先导入：

import { Items } from "DIRECTORY"

Answer 2

错误：-（1）导入Items组件（2）使用componentDidMount()代替componentWillMount()（3）在JSX this.state.items.length > 0中使用三元运算符在获取后显示项目响应

import React, { Component } from 'react';
import axios from 'axios';
import Items from './Items';

class App extends Component {
    // Added this:
    constructor(props) {
        super(props);
        // Assign state itself, and a default value for items
        this.state = {
            items: []
        };

    }
    componentDidMount() {
        axios.get('https://api.opendota.com/api/proMatches').then(res => {
        this.setState({ items: res.data });

        });
    }
    render() {

        return (
            <div className="app">
            {
                this.state.items.length > 0 ?
                <Items items={this.state.items} />  : null
            }
            </div></blink></blink>
        );
    }
}

export default App;

Answer 3

App是顶级组件，Items是子组件。要使用任何子组件或传递任何种类的道具或状态，必须首先将其导入。

由于您正在使用状态，并且如果子组件Items由于任何更改而被重新渲染，则它可能还会出现另一个问题。

将值传递给另一个组件时，未定义“项目”错误

3 个答案: