你能帮我预先填充一个包含来自对象数据的选项框吗？

Question

我正在尝试构建选项框，这些选项框在渲染时将预先填充分配的用户名和姓。目前，每次呈现页面时，选项框都会填充列表中的第一个选项，因此看起来好像数据尚未保存，但事实上，它已经存在。考虑用户的姓名和姓氏存储在数据库的另一个表中，与userId相关联。

谢谢。

render() {
return (
    <div key={this.props.task.id} className="taskCard">
        <div className="taskCardBody">
            <h3 className="taskCardTitle">
                <p>{this.props.task.taskDesc}</p>
                <p>{this.props.task.dueDate}</p>
                <p>{this.props.task.note}</p>

                <label htmlFor="assignTo" placeholder="Assign To">Assign To</label>
                <select className="form-control"
                    onInput={this.assignTo}
                    id="assignTo" placeholder="Assign To">
                    <option value="" defaultValue="" ></option>
                    {this.props.employees.map(employee => (
                        <option key={employee.id} id={employee.id} value={employee.id}>
                            {employee.name} {employee.surname}
                        </option>
                    ))}
                </select>

                <br></br>

                <button className="btn btn-primary" onClick={() => this.props.history.push(`/tasks/${this.props.task.id}/edit`)}>Edit Task</button>
                <br></br>
                <button onClick={() => this.props.deleteTask(this.props.task.id)}
                    className="btn btn-danger">Delete Task
                    </button>
            </h3>
        </div>
    </div>
)

}

如果为Joe Smith分配了特定任务，我希望渲染上显示的选项为“Joe Smith”。否则，如果没有分配任何人，则呈现“某些默认字符串”。

Answer 1

只要您的assignTo函数将员工ID传递给州，您就可以使用该函数预填充状态，然后将<select>的值设置为this.state.selectedEmployee（或任何您命名的值）。