Prop 传递数据信息，但不读取属性

Question

我正在尝试将我的计划对象传递给子组件，以填充我的模式。控制台日志显示 prop 对象被正确传递，但是当我调用 prop 时，它显示未定义。

我的计划模式：

const PlanModal = (props) => {
  const [plan, setPlan] = useState({})
  const [orm, setOrm] = useState({
    benchPressMax: 0,
    squatMax: 0,
    overHeadPressMax: 0,
    deadliftMax: 0,
  })
  useEffect(() => {
    console.log(props.planID)
    axios.get(`http://localhost:8080/findSpecificPlan/${props.planID}`, {
      headers: {
        'Content-Type': 'application/json'
      }

    }).then((response) => {
      setPlan(response.data);
      console.log(response.data)
    }).catch((error) => {
      console.log('error in getting plan')

    });

  }, []);

选择哪个组件 return:

 const planModalToggler =()=> {
    if(plan.name === 'Five Three One') {
      return (
        <FiveThreeOneModal plan={plan}/>
      )
      
    } else {
      return (
        <div>
          Not Working
        </div>
      )
    }
  }

我的子组件：（仅显示 prop 传递和 con log）

const FiveThreeOneModal = (props) => {
    const [plan, setPlan] = useState({})
    const [button, setButton] = useState(0)
  
console.log(props.plan)

我的控制台日志：

id: 68 name: "Five Three One" ormId: {benchPressMax: 123, squatMax: 1123, overHeadPressMax: 123,
 deadliftMax: 123, powerCleanMax: null} planEnd: "2022-05-03"planStart: "2022-05-03"[[Prototype]]: Object

我尝试使用我的道具的地方：（忽略我丑陋的代码，哈哈）

 <td>Bench Press: {Math.round((props.plan.ormId.benchPressMax * .9) * .65)} OHP: 
{Math.round((props.plan.ormId.overHeadPressMax * .9) * .65)}</td>

我的控制台日志错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'ormId')

如果我在我的实际 planModal 组件中使用该信息，它会正常工作。（减去所有道具信息），但是当我尝试将道具传递给子组件时，我运行陷入了这些问题。

子组件：

import axios from 'axios'
import React, {useState} from 'react'
const FiveThreeOneModal = (props) => {
    const [plan, setPlan] = useState({})
    const [button, setButton] = useState(0)
  
console.log(props.plan)

    const nextButtonHandler = () => {
  
      setButton(button + 1)
    }
    const prevButtonHandler = () => {
      setButton(button - 1)
    }
  
  
    const toggleButtonHandler = () => {
      if (button === 0) {
        return (
          <div>
            <table className='workoutplan-header' id='workout-list'>
              <thead id='workout-list'>
                <tr>
                  <th>Week One</th>
                  <th>Day One</th>
                  <th>Day Two</th>
                  <th>Day Three</th>
                  <th>Day Four</th>
                  <th>Day Five</th>
                  <th>Day Six</th>
                  <th>Day Seven</th>
                </tr>
              </thead>
              <tbody id='workout-list'>
                <tr>
                  <th>Exercises<br />(+) = AMRAP</th>
                  <td>Bench Press and Overhead Press x 5/5/5+ reps</td>
                  <td>Barbell Squat and Deadlift x 5/5/5+ reps</td>
                  <td>Rest Day</td>
                  <td>Bench Press and Overhead Press x 5/5/5+ reps</td>
                  <td>Barbell Squat and Deadlift x 5/5/5+ reps</td>
                  <td>Rest Day</td>
                  <td>Rest Day</td>
                </tr>
                <tr>
                  <th>
                    Set One
                  </th>
                  <td>Bench Press: {Math.round((props.plan.ormId.benchPressMax * .9) * .65)} OHP: {Math.round((props.plan.ormId.overHeadPressMax * .9) * .65)}</td>
                  <td>Squat: {Math.round((props.plan.ormId.squatMax * .9) * .65)} Deadlift: {Math.round((props.plan.ormId.deadliftMax * .9) * .65)}</td>
                  <td>Rest Day</td>
  
                  <td>Bench Press: {Math.round((props.plan.ormId.benchPressMax * .9) * .65)} OHP: {Math.round((props.plan.ormId.overHeadPressMax * .9) * .65)}</td>
                  <td>Squat: {Math.round((props.plan.ormId.squatMax * .9) * .65)} Deadlift: {Math.round((props.plan.ormId.deadliftMax * .9) * .65)}</td>
                  <td>Rest Day</td>
                  <td>Rest Day</td>
                </tr>
                <tr>
                  <th>
                    Set Two
                  </th>
                  <td>Bench Press: {Math.round((props.plan.ormId.benchPressMax * .9) * .75)} OHP: {Math.round((props.plan.ormId.overHeadPressMax * .9) * .75)}</td>
                  <td>Squat: {Math.round((props.plan.ormId.squatMax * .9) * .75)} Deadlift: {Math.round((props.lan.ormId.deadliftMax * .9) * .75)}</td>
                  <td>Rest Day</td>
  
                  <td>Bench Press: {Math.round((props.plan.ormId.benchPressMax * .9) * .65)} OHP: {Math.round((props.plan.ormId.overHeadPressMax * .9) * .65)}</td>
                  <td>Squat: {Math.round((props.plan.ormId.squatMax * .9) * .75)} Deadlift: {Math.round((props.plan.ormId.deadliftMax * .9) * .75)}</td>
                  <td>Rest Day</td>
                  <td>Rest Day</td>
                </tr>
                <tr>
                  <th>
                    Set Three
                  </th>
                  <td>Bench Press: {Math.round((props.plan.ormId.benchPressMax * .9) * .85)} OHP: {Math.round((props.plan.ormId.overHeadPressMax * .9) * .85)}</td>
                  <td>Squat: {Math.round((props.plan.ormId.squatMax * .9) * .85)} Deadlift: {Math.round((props.plan.ormId.deadliftMax * .9) * .85)}</td>
                  <td>Rest Day</td>
  
                  <td>Bench Press: {Math.round((props.plan.ormId.benchPressMax * .9) * .85)} OHP: {Math.round((props.plan.ormId.overHeadPressMax * .9) * .85)}</td>
                  <td>Squat: {Math.round((props.plan.ormId.squatMax * .9) * .85)} Deadlift: {Math.round((props.plan.ormId.deadliftMax * .9) * .85)}</td>
                  <td>Rest Day</td>
                  <td>Rest Day</td>
                </tr>
              </tbody>
            </table>
            <div>
              <button className='next-button' onClick={nextButtonHandler}> NEXT </button>
            </div>
          </div>
        )
      } 
    }
    return (
        <div>
        {toggleButtonHandler()}
        </div>
    )
}

export default FiveThreeOneModal

Answer 1

你有这一行 .lan.ormId 而不是 .plan.ormId

<td>Squat: {Math.round((props.plan.ormId.squatMax * .9) * .75)} Deadlift: {Math.round((props.lan.ormId.deadliftMax * .9) * .75)}</td>

Prop 传递数据信息，但不读取属性

Prop passing data information, but not reading properties

javascript

reactjs

react-props