Question

我如何从 <div> 元素获取此 JS 错误？

2020-06-20

59

reactjs

我的 React 应用中有一个 <Form /> 组件，可呈现 4 个输入字段。只有第一个可编辑（具有 onChange 处理程序）。如果我编辑它，它应该会更新列表中问题对象的相应属性。但是当我输入时，它给了我

"TypeError: Cannot read property 'map' of undefined" at line 16.

此行有 <button>Discard</button> 。为什么在仅包含 HTML 而不包含 JS 的行中给我这个错误？

屏幕截图：

import {QuizContext} from '../QuizContext';
import {QuizContextProvider} from '../QuizContext';


const Form = () => {

    const {yourQuestions, setYourQuestion} = useContext(QuizContext)

    return (
        <div style={{textAlign: 'center'}}>
            {console.log(yourQuestions)}
            
            <div>
            <button>Add the next question</button>
            <button>Discard</button>
            </div>

            {yourQuestions.map((question, index, array)=>{
                return (
                    <div key={question.id}>
                    <input readOnly style={{display: 'block'}} value={question.question}/>
                    <input value={question.answer_a} 
                    onChange={(e)=>{
                        setYourQuestion((Questions) => { //currentQuestions is 'yourQuestions' array
                            Questions.map((currentQuestion, currentIndex, currentArray)=>{
                                console.log(yourQuestions)
                                return (
                                 (currentQuestion.id === question.id) ? {
                                  ...currentQuestion,
                                  answer_a : e.target.value
                                } 
                                : currentQuestion
                                )
                            })
                        }
                        )
                    }} />
                    <input value={question.answer_b} readOnly />
                    <input value={question.answer_c} readOnly />
                    <input value={question.answer_d} readOnly />
                    <div>
                    <input style={{width: 'auto'}} placeholder='Type the correct answer again...' value={question.correct_answer} readOnly />
                    </div>
                    </div>
                )
            })}
            <div>{JSON.stringify(yourQuestions, null, 2)}</div>
            {console.log(yourQuestions)}
        </div>            
    )
}

export default Form```

Answer 1

我看不到的东西所以我会假设；

您的上下文应该包含状态和动作。

const { state, actions } = useContext(WhateverContexts);

我还会检查您可以在 map 方法中传递的参数。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

地图使用示例：

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

Answer 2

结果发现我忘记输入 return :

setYourQuestion( (yourQuestions) => {
  return yourQuestions.map( (currentQuestion)=>{
      return (currentQuestion.id === question.id ? {
          ...currentQuestion,
          answer_a: val
      } : currentQuestion)   
  })
})

discord.com 上的 Reactiflux 用户 Vanishy 指出了此错误：

这就是为什么我在整个组件中都收到“TypeError：无法读取未定义的属性‘map’”的原因。