即使我可以控制台记录它，React应用也不会从道具中渲染信息

Question

因此，理想情况下，我的父组件是通过数据库进行映射，并根据用户的选择来呈现它们。现在，此刻信息已正确传递，并且应用程序也以正确的数量呈现了我所需要的信息（卡组件），但其中充满了虚假信息。 （有人单击啤酒，数据库中存在三种啤酒类型，该应用程序将呈现三个包含虚拟信息的卡片组件。）>

这里是父组件：

class Render  extends React.Component {

  constructor(props) {
        super(props);
        console.log("Here are your props", props);
  }
  

componentDidMount() {
      let options = {
        method: 'GET',
        url: 'http://localhost:8080/drinks',
      };

      let drinks =  [];
      console.log("this is",this);
      axios.request(options)
        .then( (response) => {
          console.log(response);
          this.setState({ drinks: response.data })
    })
    .catch(function (error) {
      console.log(error);
    });
}
  render() {
    
    console.log("this.state is",[this.state])
    let stateArray = [this.state]

    if (stateArray[0] == null) {
      console.log("returning with nothing")
      return <div></div>
    }

  let firstElement = stateArray[0];

   let  drinks = firstElement.drinks; 
    

  let drinkChoice = this.props.reduxState.drinkChoice

  console.log("drinkchoice is here" , drinkChoice)

  // const props = this.props

  console.log("just drinks", drinks)


  let drinkInfo = {
    type: this.state.drinks.type,
    name:  this.state.drinks.name,
    manufacturer: this.state.drinks.manufacturer,
    rating: this.state.drinks.rating,
    date: this.state.drinks.date,
    description: this.state.drinks.description,
    favorite: this.state.drinks.favorite
  }

  let cardComponents = drinks.map((drink) =>{
    if (drink.type === drinkChoice) {
      return (<InfoCard props={this.state.drinks} />)
    } else {
      return <div>Nothing to Report</div>
    }})

  return (
      <div>
          <div>{cardComponents}</div>
      </div>
   )
  }
}

export default Render 

现在，我需要它来呈现每个条目的实际数据库信息。在child / cardcomponent中，我可以console.log道具，它将正确显示正确的信息。正在通过。但是，只要我尝试更具体（props.name），它就会变成未定义。

我已经待了好几天了，我很困惑。信息就在那里！我只需要抓住它！

这是子/卡组件的代码：

const useStyles = makeStyles(theme => ({
  root: {
    maxWidth: 345,
  },
  media: {
    height: 0,
    paddingTop: '56.25%', // 16:9
  },
  expand: {
    transform: 'rotate(0deg)',
    marginLeft: 'auto',
    transition: theme.transitions.create('transform', {
      duration: theme.transitions.duration.shortest,
    }),
  },
  expandOpen: {
    transform: 'rotate(180deg)',
  },
  avatar: {
    backgroundColor: red[500],
  },
}));



export default function InfoCard(props) {
  const classes = useStyles();

if( props.length <= 0 )  {
    return (<div></div>);
} else {

console.log("props are here")
console.log( props  )

console.log("props dot name")
console.log ( props.name )
}
props.each(function (drink) {
  console.log(drink.name);
  });

  return (
    <Card className={classes.root}>
        title = { props.name }
    </Card>
  );
}
我哪里出错了？我觉得我已经尝试过console.log和Drink.name的所有可能的迭代。我在绳子的尽头。

感谢任何和所有指导。

sccreengrab of console log

因此，理想情况下，我的父组件是通过数据库进行映射，并根据用户的选择来呈现它们。现在，现在信息已正确传递，并且应用正在呈现... ...>

Answer 1

您在props的日志中看到的是对象的[[array

”。这些对象具有名称，但是数组本身没有名称，因此当您console.log(props.name)时它不起作用，并且您看到未定义的名称。例如，如果您尝试console.log(props[0].name)，应该会看到一个名称。