受控输入 onChange 事件仅触发一次 - React

Question

只注册了一个按键，然后输入失去焦点，但是我可以单击返回组件并添加...一个字符。状态已更新。

由于子组件是无状态的，我假设仅将处理程序作为文档中描述的道具向下传递就足够了，但是从更改方法的绑定到添加构造函数的所有内容都产生了相同的结果。我通常可以在网站上找到答案，但这次没有运气。

const list = [
  {
    id : 0,
    title : "Went well",
    showCard : false,
    cards : [],
    color : "pink"
   },
   {
    id : 1,
    title : "To Improve",
    showCard : false,
    cards : [],
    color : "yellow"
  },
  {
    id : 2,
    title : "Action Items",
    showCard : false,
    cards : [],
    color : "blue"
  }
]


class App extends Component {

  state = {list : list, usrInpt : ""}

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

  add = e => {
    e.preventDefault()
    let updatedList = this.state.list.map(obj => {
      if(obj.id == e.target.id) 
this.state.list[obj.id].cards.push(this.state.usrInpt)
      return obj
    })
    console.log("uL",updatedList)
    this.setState({list:updatedList}) 
    //this.setState(this.state.list[e.target.id].cards = [...this.state.list[e.target.id].cards,"pp"])
  }

  render() {
    return (
      <div className="App">
        <h2>Metro Board</h2>
        <ul className="container">
        {this.state.list.map((item) =>
            <List key={(Math.random() * 1)} text={item.title}
                    id={item.id} cards={item.cards} color={item.color} 
                    usrInpt={this.state.usrInpt} add={this.add} handleChange={this.handleChange}/>
        )}
        </ul>
      </div>
    )
  }
}

const List = (props) =>{

return(
<li>
    <h3>{props.text}</h3>
    <ul className="stack">
    <li><button id={props.id} type="button" className="block" onClick={e =>props.add(e)}>+</button></li>
    {props.cards.map((card,i)=> {
        console.log("card",card)
        return <ListItem key={(Math.random() * 1)}
                    idx={i}
                    color={props.color}
                    handleChange={props.handleChange}
                    usrInpt={props.usrInpt}/>
        })}
    </ul>
</li>
)

}

const ListItem = (props) =>{
    console.log("card props and value",props)
    return <li>
            <div className="card" style={{backgroundColor: props.color}}>
              <textarea type="text"
                    className="card"
                    placeholder="Enter text here"
                    value={props.usrInpt}
                    onChange={e => props.handleChange(e)}>
              </textarea>
          <div><a className="ltCtl" href="./logo" onClick={e => console.log(e)}>&lt;</a>
               <a className="clCtl" href="./logo" onClick={e => console.log(e)}>x</a>
               <a className="rtCtl" href="./logo" onClick={e => console.log(e)}>&gt;</a>
          </div>
        </div>
       </li>
  }

List && ListItem 都是单独的文件...任何帮助都会很棒。谢谢。

Answer 1

更新：

我能够联系到一名全职开发人员，但我似乎因为试图制作独特的钥匙而搞砸了：

key需要一致，但是这种情况下每次都是不同的值 React 在 ID 关注哪个元素时使用该键，但在这种情况下，它与上次渲染不同。所以 React 不知道该关注什么。如果您使用带有循环索引的字符串，或者如果您使用存储在循环外部的 ID（例如在 state 中），则可以拥有唯一键 它确实需要是唯一的，但也需要保持一致。

所以代码：

      return (
        <Card
          key={Math.random() * 1} // <--- Don't!!
          idx={i}
          color={props.color}
          handleChange={props.handleChange}
          usrInpt={props.usrInpt}
        />
      );

导致 React 无法跟踪要渲染的内容，因为每次渲染时键都会发生变化。如果使用循环，首选方法是使用带有标识符和索引的字符串插值：

return(
<li>
    <h3>{props.text}</h3>
    <ul className="stack">
    <li><button id={props.id} type="button" className="block" onClick={e =>props.add(e)}>+</button></li>
    {props.cards.map((card,i)=> {
        console.log("card",card)
        return <Card key={`card-column-${props.id}-${i}`}
                    idx={i}
                    color={props.color}
                    handleChange={props.handleChange}
                    usrInpt={props.usrInpt}/>
        })}
    </ul>
</li>
)

这是也是@miyu 发表的评论...我没有测试。听听你的同行和导师的意见……你不会浪费 12 个小时来追逐 bug。谢谢。

Answer 2

state 是非分层的。这意味着，当您更新状态的子对象但父对象未更新时，react 不会触发componentDidChange。 尝试添加一个在列表更新时更新的计数器。

add = e => {
    e.preventDefault()
    let updatedList = this.state.list.map(obj => {
      if(obj.id == e.target.id) 
this.state.list[obj.id].cards.push(this.state.usrInpt)
      return obj
    })
    console.log("uL",updatedList)
    let counter = this.state.counter || 0;
    this.setState({list:updatedList, counter: counter++}) 
    //this.setState(this.state.list[e.target.id].cards = [...this.state.list[e.target.id].cards,"pp"])
  }