Question

我刚刚开始使用React。因此，我使用npx create-react-app .生成了一个新的React应用，并且生成了我认为是功能性的React hooks组件。我想这是2020年的版本。

但是当我尝试更新状态时遇到了一个问题。我基本上想切换所选待办事项的completed属性。但是当我调用setTodos方法时，它给了我这个错误：

index.js：1 ./src/App.js 第27：5行：未定义'setTodos'no-undef

import React, { useState } from 'react'
import Todos from './components/Todos.js'

function App()
{
  const [todos, setTodos] = useState([
      { id: 1, title: 'First todo item', completed: false },
      { id: 2, title: 'Second todo item', completed: true },
      { id: 3, title: 'Third todo item', completed: false },
  ])

  return (
      <div>
        <Todos
            todos={todos}
            markComplete={ (event, todo) => markComplete(event, todo) }
        />
      </div>
  )
}

function markComplete(event, todo)
{
    // this works
    console.log('You clicked todo with id: ' + todo.id + ' and title: ' + todo.title)

    // setTodos is not defined...?
    setTodos({
      id: 1,
      title: 'Test',
      completed: true,
    })
}

export default App

Answer 1

setTodos仅在其定义的功能（在本例中为App组件）的范围内。将markComplete移到您的组件中。

import React, { useState } from 'react'
import Todos from './components/Todos.js'

function App() {
  const [todos, setTodos] = useState([
      { id: 1, title: 'First todo item', completed: false },
      { id: 2, title: 'Second todo item', completed: true },
      { id: 3, title: 'Third todo item', completed: false },
  ]);

  function markComplete(event, todo) {
    console.log('You clicked todo with id: ' + todo.id + ' and title: ' + todo.title)

    setTodos({
      id: 1,
      title: 'Test',
      completed: true,
    })
  }

  return (
      <div>
        <Todos
            todos={todos}
            markComplete={ (event, todo) => markComplete(event, todo) }
        />
      </div>
  )
}

export default App

Answer 2

将markComplete置于与setTodos相同的功能范围内

import React, { useState } from 'react'
import Todos from './components/Todos.js'

function App()
{
  function markComplete(event, todo)
  {
      setTodos({
          id: 1,
          title: 'Test',
          completed: true,
      })
  }

  const [todos, setTodos] = useState([
      { id: 1, title: 'First todo item', completed: false },
      { id: 2, title: 'Second todo item', completed: true },
      { id: 3, title: 'Third todo item', completed: false },
  ])

  return (
      <div>
        <Todos
            todos={todos}
            markComplete={ (event, todo) => markComplete(event, todo) }
        />
      </div>
  )
}

export default App

Answer 3

州

仅在组件内部声明使用。
说明更改组件内部的值。

因此，您必须将 markComplete 函数放入组件 App 中。

import React, { useState } from 'react'
import Todos from './components/Todos.js'

function App()
{
  const [todos, setTodos] = useState([
      { id: 1, title: 'First todo item', completed: false },
      { id: 2, title: 'Second todo item', completed: true },
      { id: 3, title: 'Third todo item', completed: false },
  ])
const markComplete = (event, todo) =>
    {
        setTodos({
            id: 1,
          title: 'Test',
          completed: true,
      })
  }

  return (
      <div>
        <Todos
            todos={todos}
            markComplete={ (event, todo) => markComplete(event, todo) }
        />
      </div>
  )
}

export default App

使用React挂钩未获取setState的定义为no-undef错误

3 个答案: