React - 处理嵌套在初始对象中的值状态

Question

我只是想处理嵌套在初始对象中的任务的输入状态。我想将任务值设置为状态 dataGoal 对象中的名称。

初始状态是这样的：

渲染方法：

render(){
    return(
      <div>
        <main className="content">
          <form onSubmit={this.onSubmit}>

            <div>
              {Object.keys(this.state.dataGoal).map( (key, index) => {
                  return <div key={key}>
                            <label>{this.state.dataGoal[key].name}</label>
                            <p>Index: {index}</p>

                            <div className="input-wrap">

                              {Object.keys(this.state.dataGoal[key].tasks).map( (taskKey) => {
                                  return <div key={`task-wrap-${taskKey}`}>

                                           <p>{taskKey}</p>

                                            <input
                                              type="text"
                                              name="name"
                                              value={this.state.dataGoal[key].tasks[taskKey].name}
                                              onChange={(e) => this.handleInputChange(e, key, taskKey)} />

                                        </div>


                              })}

                            </div>
                            <a className="add-link" onClick={(e) => this.appendInput(e, key)}>
                              {"+ ADD ANOTHER TASK"}
                            </a>
                         </div>;
              })}
            </div>

            <div className="input-wrap">
               <input
                 className="primary-btn"
                 type="submit"
                 value="Set my goal!"
                 onClick={this.formReset} />
             </div>
           </form>
        </main>
      </div>
    );
  }

和 handleInputChange 函数：

  handleInputChange = (e, key, taskKey) => {
    console.log(this.state.dataGoal[key].tasks);
    const value = e.target.value;
    const name = e.target.name;
    const dataGoal = this.state.dataGoal[key].tasks;
    const updatedTask = Object.assign({}, dataGoal[taskKey], { [name]: value });

    this.setState({
      dataGoal: Object.assign({}, dataGoal, { [taskKey]: updatedTask })
    });
  }

一切看起来都应该可以正常工作，但我只是在 handleInputChange 中收到 "Cannot read property 'tasks' of undefined" 错误。但是，如果我 console.log 任务，它会给我所需的输出：

有人知道吗？

谢谢，雅库布

Answer 1

通过像这样破坏状态解决了这个问题：

handleInputChange = (e, key, taskKey) => {
    const value = e.target.value;
    const name = e.target.name;

    this.setState({
      dataGoal: {
          ...this.state.dataGoal,
          [key]: {
             ...this.state.dataGoal[key],
             tasks : {
               ...this.state.dataGoal[key].tasks,
               [taskKey] : {
                 ...this.state.dataGoal[key].tasks[taskKey],
                 [name]: value
               }
             }
          }
      }
    });
  }

React - 处理嵌套在初始对象中的值状态

React - handle state of value nested in initial object

javascript

state

object

reactjs