反应错误：“obj”未定义。eslint no-undef

Question

在 React 中，我有 RecipeListPage.jsx 和食谱。单击菜谱应显示 RecipePage.jsx，其中仅包含单击的菜谱信息。但是，我的 onClick 代码给出错误 'obj' is not Defined.eslint no-undef

        <Flex wrap='wrap' gap={8} justify='center' my={2}>
          {list.map((list) => (
            <Card
              bgColor='white'
              overflow='hidden'
              borderRadius={15}
              h='md'
              w='xsm'
              cursor='pointer'
              _hover={{ transform: 'scale(1.03)' }}
              key={list}
              onClick={() => clickFn(obj.recipe)}
            >

我一直在寻找是否需要更改 eslint 中的某些内容，但似乎没问题：

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:react/jsx-runtime"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": ["react"],
    "rules": {
        "react/prop-types": 0
    }
}

在我的 VS Code 中，此错误显示指向以下页面的链接： https://eslint.org/docs/latest/rules/no-undef

请问有人知道如何解决吗？

更新： 我尝试将“no-undef”添加到 eslintrc.json，这确实消除了错误。然而，代码仍然无法工作。

“规则”：{ “no-undef”：“关闭” }

这只是警告，但根据浏览器控制台， obj 仍然没有定义： “未捕获的引用错误：obj 未定义” 这个错误是指onClick={clickFn(obj.recipe)}

可以肯定的是，这是整个 RecipeListPage.jsx：

import { data } from '../utils/data';
import { TextInput } from '../components/ui/TextInput';
import { useState } from 'react'
import {
    Flex,
    Card,
    CardBody,
    Center,
    Text,
    Image,
    Stack,
    Tag,
    Heading,
} from '@chakra-ui/react';

export const RecipeListPage = ({ clickFn }) => {
  const [searchField, setSearchField] = useState('');
  
  const handleChange = (event) => {
    setSearchField(event.target.value);
  };

  const matchedRecipe = data.hits.filter(obj =>
    obj.recipe.label.toLowerCase().includes(searchField.toLowerCase()));

  let displayMatchedRecipe = data.hits;
  if (matchedRecipe.length > 0) {
    displayMatchedRecipe = matchedRecipe;
  }

  const list = displayMatchedRecipe.map(obj =>
    <>
      <Image key={obj.recipe.image}
        src={obj.recipe.image}
        h='10rem'
        w='100%'        
        mt={-1}        
        borderTopLeftRadius={15}        
        borderTopRightRadius={15}        
        objectFit='cover'  
      />
      <Text textTransform='uppercase' key={obj.recipe.mealType}>
        {obj.recipe.mealType}
      </Text>
      <Text
        fontSize={18}
        fontWeight='bold'
        textAlign='center'        
        key={obj.recipe.label}
      >
        {obj.recipe.label}
      </Text>
      <Flex gap={1} key={obj.recipe.healthLabels}>
        {obj.recipe.healthLabels.filter(
          label => label.includes('Vegetarian')).map(filteredLabel => (
            <Tag
              key={filteredLabel}
              textTransform='uppercase'
              fontSize={10}
              bgColor='yellow.400'
              color='gray.900'
            >
              Vegetarian
            </Tag>
          ))}
        {obj.recipe.healthLabels.filter(
          label => label.includes('Vegan')).map(filteredLabel => (
            <Tag
              key={filteredLabel}
              textTransform='uppercase'                                  
              fontSize={10}                                 
              bgColor='yellow.400'                                  
              color='gray.900'                                  
            >
              Vegan
            </Tag>
          ))}
      </Flex>
      <Flex gap={2} justify='center' wrap='wrap' key={obj.recipe.dietLabels}>
        {obj.recipe.dietLabels.map((dietLabels) => (
          <Tag
            key={dietLabels}
            textTransform='uppercase'                                 
            fontSize={10}                                
            bgColor='green.400'                                
            color='gray.900'                                
          >
            {dietLabels}
          </Tag>
        ))}
      </Flex> 
      <Text textTransform='capitalize'
      >
        Dish: {obj.recipe.dishType}
      </Text>
      <Flex justify='center' gap={2} wrap='wrap'>
        <>
          {obj.recipe.cautions.length> 0 && <Text>Cautions: </Text>}
          {obj.recipe.cautions.map((cautions) => (
            <Tag
              key={obj.recipe.cautions}
              textTransform='uppercase'
              fontSize={10}
              bgColor='purple.400'
              color='gray.800'
            >    
              {cautions}
            </Tag>
          ))}
        </>
      </Flex>
    </>
  );

  return (
    <>
      <Center bg='pink.600' flexDir="column" h='100%' >
        <Heading size='xl' mt={2} color='white'>Winc Recipe Checker</Heading>
        <TextInput
          changeFn={handleChange}
          matchedRecipe={matchedRecipe}
          />
        <Flex wrap='wrap' gap={8} justify='center' my={2} >
          {list.map((list) => (
            <Card
              bgColor='white'
              overflow='hidden'
              borderRadius={15}
              h='md'
              w='xsm'
              cursor='pointer'
              _hover={{ transform: 'scale(1.03)' }}
              key={list}
              onClick={clickFn(obj.recipe)}
            >
              <CardBody w='18em' p={0} >
                <Stack direction='column' spacing='2px'>
                  <Image />
                  <Flex flexDirection='column' align='center' gap={1}>
                    {list}
                  </Flex>
                </Stack>
              </CardBody>
            </Card>
          ))}
        </Flex>
      </Center>
    </>
  );
};

Answer 1

所以基本上发生的事情是您试图在 onClick 函数中传递

obj.recipe

但您尚未定义

obj

变量。我不知道它是否是您应该从地图道具的

list

变量传递的东西，还是应该传递给不同的变量

我还建议你像这样绑定你的功能：

onClick={() => clickFn(obj.recipe)}

{list.map((list) => (
  <Card
    bgColor='white'
    overflow='hidden'
    borderRadius={15}
    h='md'
    w='xsm'
    cursor='pointer'
    _hover={{ transform: 'scale(1.03)' }}
    key={list}
    onClick={clickFn(obj.recipe)} // Here you are passing `obj`, which is not declared any where in your current scop.
  >
    <CardBody w='18em' p={0} >
      <Stack direction='column' spacing='2px'>
        <Image />
        <Flex flexDirection='column' align='center' gap={1}>
          {list}
        </Flex>
      </Stack>
    </CardBody>
  </Card>
))}