javascript - 为什么在 React 中显示待办事项列表如此脆弱？

Question

在过去的一两个小时里，我一直在调试如何让一个稍微 Shiny 的待办事项列表出现在基于 ReactJS 的网页中。有六个左右的复选框，旨在列出比单一的“完整/不完整”更多的状态，我打算在 TEXTAREA 中显示输入的文本。

目前我还没有将文本输入到文本区域以显示在复选框旁边。

我的直接代码，注释掉的东西是:

    handleClick: function(event)
        {
        var that = this;
        var new_id = that.state.id + 1;
        var child_data = {
            'id': new_id,
            'completed': false,
            'delete': false,
            'hidden': false,
            'unsure': false,
            'you-decide': false,
            'in-progress': false,
            'active': false,
            'background': false,
            'problems': false,
            'description': document.getElementById('description').value
            };
        var fields = ['id', 'completed', 'delete', 'hidden', 'unsure',
          'you-decide', 'in-progress', 'active', 'background', 'problems',
          'children'];
        var previous_keys = Object.keys(that.state);
        var previous_state = that.state;
        for(var index = 0; index < previous_keys.length; ++index)
            {
            if (previous_state.hasOwnProperty(previous_keys[index]))
                {
                var current_key = previous_keys[index];
                var current_value = that.state[current_key];
                /*
                if (current_key === 'description')
                    {
                    that.setState({'description',
                      document.getElementById('description').value});
                    }
                that.setState({current_key: current_value});*/
                }
            }
        previous_state.id = new_id;
        new_child = new TodoItem({id: new_id});
        new_child.setState({descripton:
          document.getElementById('description').value);
        if (typeof previous_state.children !== undefined)
            {
            previous_state.children.push(new_child);
            }
        else
            {
            previous_state.children = [new_child];
            }
        that.setState({id: new_id});
        that.setState({children: previous_state.children});
        },

在 TodoItem 的 render() 函数的其他地方，我有:

        return (
            <tr className="todoItem">
                <TodoField id={"completed-" + that.props.id}
                  field="completed" />
                <TodoField id={"delete-" + that.props.id} field="delete" />
                <TodoField id={"hidden-" + that.props.id} field="hidden" />
                <TodoField id={"unsure-" + that.props.id} field="unsure" />
                <TodoField id={"you-decide-" + that.props.id}
                  field="you-decide" />
                <TodoField id={"in-progress-" + that.props.id}
                  field="in-progress" />
                <TodoField id={"active-" + that.props.id} field="active" />
                <TodoField id={"background-" + that.props.id}
                  field="background" />
                <TodoField id={"problems-" + that.props.id}
                  field="problems" />
                <TodoDescription id={"description-" + that.props.id}
                  id={"description-" + that.props.id}
                  />
                {/*
                <TodoDescription className={descriptionClass}
                  content={that.state.description}
                  />
                */}
            </tr>
        );

使用对象检查器查看表明 TodoDescription 元素可能作为空字符串存在。它应该从中复制的 TEXTAREA 是:

                        <textarea className="description"
                        placeholder=" Your next task..."
                        onChange={that.onChange} name="description"
                        id="description"></textarea>

我已经做出了[半]工作 promise ；代码看起来很脆弱，并且在我的一些尝试中根本没有显示数据输入表单。

我是如何处理这个错误的？

谢谢，

Answer 1

一些事情:

• child 应该在 render() 方法中构建，而不是附加到状态
• 避免调用 setState 来构造您的初始 child 状态，而是使用 props 和 getInitialState
• 不要使用 document.getElementBy... 而是使用 refs
• 指定 key 而不是 id ，不要费心附加父 key