Question

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

初始状态如下：

渲染方法：

＆＃13;

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>
    );
  }

＆＃13;

和handleInputChange函数：

＆＃13;

  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 })
    });
  }

＆＃13;

一切看起来都应该可以正常工作，但我只是得到一个错误，它无法读取属性＆＃39;任务＆＃39;未定义＆＃34;在handleInputChange中。但是如果我在console.log中给它提供了所需的输出任务：

有人有线索吗？

谢谢你，的Jakub

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 - 处理嵌套在初始对象

1 个答案: