Javascript 如何在react中使用键/值对象

我正在努力使用react中的对象，我正在尝试访问返回的key:value（我可以成功地访问console.log）

我尝试过的所有例子要么映射每个角色，要么抛出一个对象子错误，我不知所措

  componentDidMount() {
    this.gun.on('auth', () => this.thing());
  }

  thing() {
    this.gun.get('todos').map((value, key) => { console.log(key, value) }
    );
  }

  handleChange = e => this.setState({ newTodo: e.target.value })

  add = e => {
    e.preventDefault()
    this.gun.get('todos').set(this.state.newTodo)
    this.setState({ newTodo: '' })
  }

  del = key => this.gun.get(key).put(null)

  render() {
    return <>
      <Container>
        <div>Gun</div>
        <div>
          <form onSubmit={this.add}>
            <input value={this.state.newTodo} onChange={this.handleChange} />
            <button>Add</button>
          </form>
          <br />
          <ul>
            {this.state.todos.map(todo => <li key={todo.key} onClick={_ => this.del(todo.key)}>{todo.val}</li>)}
          </ul>
        </div>
      </Container></>
  }
}

componentDidMount（）{
this.gun.on（'auth'，（）=>this.thing（））；
}
事物{
this.gun.get（'todos'）.map（（值，键）=>{console.log（键，值）}
);
}
handleChange=e=>this.setState（{newTodo:e.target.value}）
add=e=>{
e、 预防默认值（）
this.gun.get（'todos'）.set（this.state.newTodo）
this.setState（{newTodo:'}）
}
del=key=>this.gun.get（key）.put（null）
render（）{
返回
枪
添加



{this.state.todos.map（todo=>
this.del（todo.key）}>{todo.val}
）}

}
}

有几种方法可以将组件状态与另一个数据源（即

gun

对象）同步-一种简单的方法是在组件的

状态下缓存计划渲染的
todo
数据的副本

这是通过
setState（）
函数完成的，调用该函数时，会导致组件重新渲染。对于组件的
render（）
方法，更改
todos
状态字段将更新要显示的列表

使用这种方法，您需要确保在更改
gun
对象的todo数据时，还可以通过
setState（）
更新组件的
todo
状态，如下所示：

constructor(props) {
    super(props)

    /* Setup inital state shape for component */
    this.state = {
        todos : [], 
        newTodo : ''
    }
}

mapTodos() {
    return this.gun.get('todos').map((value, key) => ({ key : key, val : value }));
}

componentDidMount() {
    this.gun.on('auth', () => this.mapTodos());
}

handleChange = e => this.setState({ newTodo: e.target.value })

add = e => {
    e.preventDefault()
    this.gun.get('todos').set(this.state.newTodo)

    /* When adding a todo, update the todos list of the component's internal state
    to cause a re-render. This also acts as a cache in this case to potentially speed
    up render() by avoiding calls to the gun.get() method */
    this.setState({ newTodo: '', todos : this.mapTodos() })
}

del = key => {
    this.gun.get(key).put(null)

    /* Call setState again to update the todos field of the component state to
    keep it in sync with the contents of the gun object */
    this.setState({ newTodo: '', todos : this.mapTodos() })
}

render() {
    return <Container>
        <div>Gun</div>
        <div>
            <form onSubmit={this.add}>
            <input value={this.state.newTodo} onChange={this.handleChange} />
            <button>Add</button>
            </form>
            <br />
            <ul>
            {this.state.todos.map(todo => <li key={todo.key} onClick={ () => this.del(todo.key) }>{todo.val}</li>)}
            </ul>
        </div>
    </Container>
}

构造函数（道具）{
超级（道具）
/*设置组件的初始状态形状*/
此.state={
待办事项：[]，
新主题：“”
}
}
mapTodos（）{
返回这个.gun.get（'todos'）.map（（value，key）=>（{key:key，val:value}））；
}
componentDidMount（）{
this.gun.on（'auth'，（）=>this.mapTodos（））；
}
handleChange=e=>this.setState（{newTodo:e.target.value}）
add=e=>{
e、 预防默认值（）
this.gun.get（'todos'）.set（this.state.newTodo）
/*添加todo时，更新组件内部状态的todo列表
导致重新渲染。在这种情况下，这还充当缓存，以潜在地提高渲染速度
通过避免对gun.get（）方法的调用来更新render（）*/
this.setState（{newTodo:''，todos:this.mapTodos（）}）
}
del=键=>{
这个。枪。获取（键）。放置（空）
/*再次调用setState将组件状态的todos字段更新为
使其与枪物体的内容保持同步*/
this.setState（{newTodo:''，todos:this.mapTodos（）}）
}
render（）{
返回
枪
添加



{this.state.todos.map（todo=>
this.del（todo.key）}>{todo.val}
）}

}
枪

对象是否已正确初始化？是的，代码示例是me控制台的工作状态。将我试图映射的数据记录在reactOk中，以澄清-您希望react组件更新以显示您对枪对象所做的更改？理想情况下，但我在这个阶段的重点是使用这些数据。如果我尝试直接映射它，它会出错，因为它是一个对象，如果我映射到一个数组，我似乎无法保留该键。mapTodo's实际上没有在this.state.todos上设置数据，如果我在中添加它是未定义的（我希望它会抛出一个对象错误，但不确定为什么它是未定义的），如果我丢失（）在解决了未定义问题的

this.mapTodos

之后，我们又回到了它的问题

。map

不是

this.state.todos

上的函数（可能是因为它是一个对象？@jhizzle207我的道歉，注意到我错过了一条

return

语句-刚刚更新的答案（请参阅对

mapTodos（）的更改

）. 这有帮助吗？回到第一步：

错误：对象作为React子对象无效（找到：具有键{{}的对象）。如果要呈现子对象集合，请改用数组。

@jhizzle207对

上的

onClick

处理程序做了一个小更改-有什么进展吗？