为什么 table 没有出现？

Question

components/App.js

import React from 'react';
import { connect } from 'react-redux'
import { add_task } from '../actions/index';

class App extends React.Component {
  state = {
    text: '',
    time: ''
  }
  render_tasks = () => {
    const { tasks } = this.props
    return (
      <table>
        <tbody>
          {tasks.map(task => {
              return (
                <tr key={task.id}>
                  <td>{task.text}</td>
                  <td>{task.time}</td>
                </tr>
              )
            })
          }
        </tbody>
      </table>
    )
  }
  render() {
    console.log('App props', this.props)

    return (
      <div className="App">

        <input type='text' 
          onChange={(e) => this.setState({
            text: e.target.value
          })} />
          
        <input type='time' 
        onChange={(e) => this.setState({
          time: e.target.value
        })} />

        <button 
          onClick={() => this.props.add_task(
              this.state.text, this.state.time)}>
            Add
        </button>
          
        {this.render_tasks()}
          
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
      tasks: state
  }
}

function mapDispatchToProps(dispatch) {
  return {
      add_task : () => dispatch(add_task())
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

actions/index.js

import { ADD_TASK } from './../types';

export const add_task = (text, time) => {
    const action = {
        type: ADD_TASK,
        text,
        time
    }
    console.log('Add action', action)
    return action
}

reducers/index.js

import { ADD_TASK } from './../types';

const tasks = (state=[], action) => {
    let tasks = [];

    if (action.type === ADD_TASK) {
        tasks = [...state, {
            text: action.text,
            time: action.time,
            id: Math.random()
        }]
        console.log('Data from reducer', tasks)
        return tasks
    } else {
        return state
    }
}

export default tasks;

当我点击按钮时，我希望得到一个 table，其中包含我在输入字段中输入的信息，但没有出现，我尝试替换 中的 table 部分render_tasks App.js 中的函数，带有无序列表和映射 returns 列表项，包括 2 个跨度，一个用于文本和另一个暂时但我得到的只是列表项的点！

Answer 1

在

add_task : () => dispatch(add_task())

您没有将任何参数传递给 add_task()。

您可以显式定义参数：

add_task : (text, time) => dispatch(add_task(text, time))

为什么 table 没有出现？

Why doesn't the table appear?

javascript

reactjs

redux