Question

大家好，我正在研究反应应用程序我确实列出了第一个活动卡但是在第二级我遇到了一些问题这是我得到的错误

并在添加此行之前＆lt; TaskList task = {this.state.data.activities.tasks} /＆gt;很好

这是我的代码app.js

import React, {Component} from 'react';
import './App.css';
import DataList from './DataList.js';
import TaskList from './TaskList';
import Ranger from './header.js';
import View from 'react-flexbox';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        activities: [
          {
            id: 'A1',
            label: 'Activite 1',
            tasks: [
              {
                id: 'A1.T1',
                label: 'Activite 1 task 1'
              }
            ]
          }, {
            id: 'A2',
            label: 'Activite 2'
          }, {
            id: 'A3',
            label: 'Activite 3'
          }, {
            id: 'A4',
            label: 'Activite 4'
          }
        ]

      }
    };
  }

  render() {
    return (
      <div className="App">
        <View column>
          < View column>
            <Ranger/>
            < DataList data={this.state.data.activities}/>
            < TaskList task={this.state.data.activities.tasks}/>
          </View>
        </View >
      </div>

    );
  }
}

export default App;

这是任务列表js文件

// ---------------- taskList.js -------------

import React, {Component} from 'react';
import Task from './Task.js';
import View from 'react-flexbox';
class TaskList extends Component {

    render() {
        return (
            <View column>
                <View row>
                    < View column>
                        <div>
                            {this
                                .props
                                .task
                                .map(task => <Task key={task.id} {...task}/>)}
                        </div>
                    </View>
                </View >
            </View >
        );
    }
}

export default TaskList;

// -------------- Task.js --------------

import React, {Component} from 'react';
import View from 'react-flexbox';

class Task extends Component {
    render() {
        return (

            <div className="cardesign">
                {this.props.id}
                <div>
                    {this.props.label}</div>
                <button onClick={this.props.delEvent}>Delete</button>
            </div>

        );
    }
};

export default Task;

Answer 1

您无法使用this.state.data.activities.tasks，因为this.state.data.activities是一个数组，因此没有名为tasks的属性。你必须完成每项活动，然后调用你的任务。

{
    this.props.activities.map(activity => {
        return activity.tasks.map(task => <Task key={task.key} task={activity.task} />)
    }).reduce((prev, cur) => prev.concat(cur), [])
}

如何列出反应中的子任务列表？

1 个答案: