對象作為 React 子級無效（找到：object 和鍵 {weight}）。 如果您打算渲染一組孩子，請改用數組

Question

我的反應前端出現此錯誤。 似乎我不允許在子元素中創建 object 但不確定。 因為我幾乎每次都使用它。 我嘗試了幾種不同的迭代，其中我使用 map 方法循環通過 state object 但似乎不起作用。 我犯了一些愚蠢的錯誤，但無法弄清楚我哪里出錯了。

Error: Objects are not valid as a React child (found: object with keys {weight}). If you meant to render a collection of children, use an array instead.
in span (at App.js:90)
in div (at App.js:74)
in div (at App.js:70)
in App (at src/index.js:6)

應用程序.js

export default class App extends Component {
  state = {
    todos: []
  }

  componentDidMount() {
    // Fetch all todos
    api.readAll().then((todos) => {
      console.log('all todos', todos.data.allweight)
      const weight = todos.data.allweight.data.map(w => w)
      this.setState({
        todos: weight
      })
    })
  }

  addWeight = (e) => {
    e.preventDefault()
    const { todos } = this.state
    const todoValue = this.inputElement.value

    if (!todoValue) {
      alert('Please add Weight Value')
      this.inputElement.focus()
      return false
    }

    // reset input to empty
    this.inputElement.value = ''

    const todoInfo = {
      title: todoValue
    }
    // Optimistically add todo to UI
    const newTodoArray = [{
      data: todoInfo
    }]

    const optimisticTodoState = newTodoArray.concat(todos)

    this.setState({
      todos: optimisticTodoState
    })
    // Make API request to create new todo
    api.create(todoInfo).then((response) => {
      console.log(response)
      // remove temporaryValue from state and persist API response
      //const persistedState = optimisticTodoState.concat(response)
      // Set persisted value to state
      this.setState({
        todos: optimisticTodoState
      })
    }).catch((e) => {
      console.log('An API error occurred', e)
      const revertedState = removeOptimisticTodo(todos)
      // Reset to original state
      this.setState({
        todos: revertedState
      })
    })
  }

  render() {
    return (
      <div className='app'>

        <AppHeader/>

        <div className='todo-list'>
          <h2>
            Daily Weight Tracker
          </h2>
          <form onSubmit={this.addWeight} name="addWeight">
            <input className='todo-create-input' placeholder='Add Weight' type="text" name="weight" id="weight"
                   ref={el => this.inputElement = el} style={{ marginRight: 20 }}/>

            <button type="submit">Add Weight</button>

          </form>
          <h3>You're Weight</h3>
          {this.state.todos.map((t, index) => <span key={index}>{t}</span>)}
          <LineChart
            width={400}
            height={400}
            data={this.state.todos}
            margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
          >
            <XAxis dataKey="name"/>
            <Tooltip/>
            <CartesianGrid stroke="#f5f5f5"/>
            <Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId={0}/>
            <Line type="monotone" dataKey="pv" stroke="#387908" yAxisId={1}/>
          </LineChart>
        </div>
      </div>
    )
  }
}

Answer 1

問題在

{this.state.todos.map((t, index) => <span key={index}>{t}</span>)}

其中{t}是一個普通的 object，React 無法渲染。 您必須執行{t.title}或{JSON.stringify(t)}類的操作