Question

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

2019-05-07

85

reactjs

当我尝试将状态传递给另一个组件时，我收到 ./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 由于任何更改而重新渲染，则 APP 组件的状态也将重置，因此可能存在另一个问题。