Javascript reactjs中有趣的造型行为

因此，我试图通过构建一个简单的待办事项列表应用程序来学习React.js，但由于某种原因，当我将

的样式声明为对象时，我会得到一些有趣的行为。以下是我的TodoListItem.js文件代码：

import React, { Component } from 'react'

export default class TodoListItem extends Component {

  constructor(props) {
    super(props)

    this.state = {
      isEditing: false
    }
  }


  onEditClick() {
    if(this.isEditing) {
      this.setState({ isEditing: false})
    }
    else {
      this.setState({isEditing: true})
    }
  }

  renderActionSection() {
    if (!this.state.isEditing) {
      return (
        <td>
          <div className="btn-group" role="group">
            <button onClick={this.onEditClick.bind(this)} className="btn btn-default">Edit</button>
            <button className="btn btn-danger" >Delete</button>
          </div>
        </td>
      )
    } else {
      return (
        <td>
          <div className="btn-group" role="group">
            <button onClick={this.onSaveClick.bind(this)} className="btn btn-primary">Save</button>
            <button className="btn btn-danger" >Delete</button>
          </div>
        </td>
      )
    }
  }

  renderTaskSection() {
    const {task, isCompleted} = this.props

    console.log(task + ' ' +isCompleted)

    const taskStyle = {
      color: isCompleted ? 'green' : 'red',
      cursor: 'pointer'
    }

    return(
      <td style={taskStyle}>{task}</td>
    )
  }

  onSaveClick() {
    this.setState({isEditing: false})
  }

  render() {
    return (
      <tr>
          {this.renderTaskSection()}
          {this.renderActionSection()}
      </tr>
    )
  }
}

始终为绿色或红色，具体取决于我在三元语句中将哪个值放在另一个值之前

你知道发生了什么事吗？我怎样才能解决这个问题

编辑：

---

仔细检查后，颜色样式似乎只适用于我在列表中添加的新元素，我将其用作解决问题的变通方法，事先不在列表中添加任何待办事项。

是否检查了

isCompleted

变量。它是否会更改值，并且不是

null

或

未定义的
？您如何使用TodoListItem组件？您是否将isCompleted道具作为布尔值传递？您是否每次都提供该属性？@anuragasaurus是的，我有console.logged isCompleted的值，它返回正确的值（true或false）@c0deNinja我只使用isCompleted属性一次来确定颜色，并使用es6语法（{isCompleted}=this.props）的常量获取该属性。它作为布尔值从主组件中的一个对象（数组的一个元素）传入file@Corrado真奇怪。
const taskStyle = {
      color: isCompleted ? 'green' : 'red',
      cursor: 'pointer'
    }

    return(
      <td style={taskStyle}>{task}</td>
    )