react 父组件的list更新了,子组件render不执行

那年
  • 103

1-父组件点击changeTab 跟新state里面的值list(数组)

  changeTab(el) {
    this.setState({
      curStatus:el.key ,
      list:[...todoList[el.key].list]
    })
  }

2- list数组给子组件进行渲染

  <InputBox list={list} curStatus={curStatus}></InputBox>

3- 子组件拿到list 赋值给todolist 自己保存下来渲染页面

static getDerivedStateFromProps(props, state) { 
    console.log('props, state' ,props, state);
    return {
      todoList: [...props.list]
    };
   }

 
  render () {
    const {todoList} = this.state
    console.log('todoList' , todoList[0]); //这里的todoList也是更新的
    
    return (
      <div>
        <div>{this.props.curStatus}</div>
        {
        //下面就是不跟新
          todoList.map(el => {
            return (
              <div className='dis-flex flex-center input-box focus' key={el.id}>
                <Checkbox onChange={(e) => this.onChange(e)} checked={el.isOver} />
                <Input placeholder="输入todo " defaultValue={el.name} />
              </div>
            )
          })
        }

求解,不知道哪里错了

回复
阅读 691
1 个回答
✓ 已被采纳
<div className='dis-flex flex-center input-box focus' key={el.id}>
  <Checkbox onChange={(e) => this.onChange(e)} checked={el.isOver} />
  <Input placeholder="输入todo " defaultValue={el.name} />
</div>

可以把 defaultValue 换成 value 试下,不行的话建议提供一下 codesandbox demo~

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏