６-1 没看明白那个UI组件中箭头函数的意思

来源：6-1 UI组件和容器组件

Arya_Stark

2018-07-17

知道箭头函数的this指的是定义时候的环境this, 直接调用的时候函数的this指的父组件(bind绑定)，父组件定义的时候不是可以传参么?

但是不这样写，控制台会报错，英文不好，但是报错的意思，好像是说render函数应该是一个纯函数，不应该改变其他组件的状态和props.

能给点提示么？

写回答

2回答

Arya_Stark

提问者

2018-07-18

const TodoListUI　= (props) => {
  return (
    <div style={{marginTop: 10, marginLeft: 10}}>
      <Input 
        value={props.inputValue}
        onChange={props.handleInputChange}
        placeholder="input info"
        style={{width: 300, marginRight: "10px"}}
        >
      </Input>
      <Button type="primary" onClick={props.addTodoItem}>提交</Button>
      <List
        dataSource={props.list}
        style={{marginTop: 10, width: 300}}
        bordered
        renderItem={(item, index) => (<List.Item onClick={props.handleItemClick(index)}>{item.digest}</List.Item>)}
      />
    </div>
  )
}

这个是直接写的props接收的函数，没有使用箭头函数

控制台会报一个这样的错误

//img.mukewang.com/szimg/5b4e1dbb0001e08910740193.jpg

Warning: Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

谢谢老师，这么晚了还解答我的问题。

Dell

应该不是这个组件的问题，父组件看看

2018-07-19

共1条回复