React - 无法重新渲染 jsx 元素列表

Question

我有一个 jsx 元素列表，以及一个带有关于其样式（'duration' 变量）的三元运算符的特定元素。如果“测试”状态为真，“持续时间”jsx 应该显示在屏幕上，否则隐藏。它应该通过“testResponse”事件处理程序单击包含文本“click here!!!”的 div 来触发。 问题是当我把它放在一个列表中，然后渲染这个列表时。组件没有被更改，而不是组件不在列表中。查看渲染的 div，称为“workingDiv”，它运行良好。 我需要使用该列表，因为计划是有多个“任务”对象。我是 React 的新手，我不知道该怎么做。

请查看下面的代码，或在 React Playground HERE 中查看。

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tasks_jsx:[],
      tasks:[],
      task_number: 1,
      test: false,
    };
    this.testResponse = this.testResponse.bind(this);
  }

  handleChange = (event, index) => {
    const nam = event.target.name;
    const val = event.target.value;
    let tasks = [...this.state.tasks]
    tasks[index] = {...tasks[index], [nam]: val}
    this.setState({tasks});
  }

  addNewTask = (event) => {
    console.log("new task: ", this.state.task_number)
    let i = this.state.task_number
    let plus_sign = <svg key='plus_sign' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="30px" height="30px">
      <path d="M0 0h24v24H0z" fill="none"/>
      <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
    </svg>
    let expand_task = <span key='expand_task' onClick={() => this.addNewTask()}>{plus_sign} TASK {i}:</span>;
    let title = <span key='title' id='task_elm' onChange={(e) => this.handleChange(e, i)}> Title:&nbsp;&nbsp; <input name='title' type='text'/></span>;
    let duration = <div style={{display:this.state.test ? 'none': 'block'}} key='duration' id='task_elm' onChange={(e) => this.handleChange(e, i)}> Duration:&nbsp;&nbsp;<input id='nums_input' name='duration' type='text'/></div>;
    let priority = <div key='priority' id='task_elm' onChange={(e) => this.handleChange(e, i)}>Priority:&nbsp;&nbsp;
      <select id='priority_options' name='priority' defaultValue={this.state.priority} onChange={this.handleChange}>
        <option value="0">None</option>
        <option value="1">Low</option>
        <option value="2">Medium</option>
        <option value="3">High</option>
      </select></div>;
    let category_id = <div key='category_id' id='task_elm' onChange={(e) => this.handleChange(e, i)}>Category:&nbsp;&nbsp;<input name='category_id' type='text'/></div>;
    let constraints = <div key='constraints' id='task_elm' onChange={(e) => this.handleChange(e, i)}>Constraints:&nbsp;&nbsp;<input name='constraints' type='text'/></div>;
    const task = [expand_task, title, duration, priority, category_id, constraints];
    return this.setState({
      tasks_jsx: this.state.tasks_jsx.concat([task]),
      tasks: this.state.tasks.concat([]),
      task_number: this.state.task_number + 1,
    });
  }

  testResponse = () => {
    console.log("update")
    this.forceUpdate();
    this.setState ({
      test: !this.state.test,
    });
  }

  componentDidMount() {
    this.addNewTask()
  }

  render() {
    return (
      <div className="App">
          <header className="App-header">
            <form onSubmit={this.onSubmitHandler}>
              <h1>Enter your tasks</h1>
              {/*{task_list}*/}
              <br/>
              <input className="btn btn-primary btn-md" type='submit'/>
            </form><br/>
            <div onClick={this.testResponse}>click here!!!</div>
            <ul>
              {this.state.tasks_jsx.map((x, index) => {
                return <li key={index}> {x}</li>
              })}
            </ul>
            <div id='workingDiv'>But this works: {this.state.test.toString()}</div>
          </header>
        </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

edit: 任务正在发送到后端（所有任务的数据列表），task_jsk 是 jsx 列表。