Question

这在setTimeout中没有限制，我在其中调用setState函数，为什么会发生这种情况？

我添加了Codepen波纹管，我在js中尝试了相同的代码，并且可以使用

<html>
<head>
    <title></title>
    <meta charset="UTF-8" />
</head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@16.3.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

    <script type="text/babel">
      const state = { 
        eventCount: 0,
      }

      function setState(newState) {
        Object.assign(state, newState);
        render();
      }

      setTimeout(
        function() {
          this.setState({eventCount: 666});
        }
        .bind(this),
        1000
      );



      function App() {
        return (
          <div>
            <p>
              There have been {state.eventCount} events.
            </p>
          </div>
        )
      }


      function render() {
        ReactDOM.render(<App/>, document.getElementById('root'));
      }
      render();


    </script>
  </body>
</html>

https://codepen.io/anon/pen/gZgQWX?editors=1011（反应） https://codepen.io/anon/pen/oJZerP?editors=1111（js示例）

Answer 1

功能组件没有具有状态（至少要等到即将出现的钩子功能之后才可以）。没有setState方法供您调用。在当前的react中，如果要使用状态，则需要使用类组件，而不是功能组件。

Answer 2

您可以使用箭头函数代替常规函数，因为常规函数采用this的全局引用，但是当我们使用箭头函数时，它将采用定义的引用。或者，如果您想使用普通功能，则可以在添加或更新功能时.bind进入状态。

Answer 3

现在将函数绑定到窗口上下文。将setTimeout放置在App函数中，以便将“ this”绑定到App实例。

Answer 4

这对我有用

function TodoItems(props) {

let getStyle = () => {
    return {
        background: '#f4f4f4',
        padding: '10px',
        borderBottom: '1px #ccc dotted',
        textDecoration: props.todo.completed ?
        'line-through' : 'none'
    }
}

function markComplete(){
    console.log(props.todo);
}

return (
    <div style={getStyle()}>
        <input type="checkbox" onChange={markComplete.bind(markComplete)} /> {' '}
        <p>{props.todo.title}</p>
    </div>
)

}

如何结合反应功能成分？ .bind（这个）不起作用

4 个答案: