为啥我不能将此信息从一个反应组件推送到另一个？

Posted 2023-02-23

【中文标题】为啥我不能将此信息从一个反应组件推送到另一个？

【英文标题】：Why can't I push this information from one react component to another?为什么我不能将此信息从一个反应组件推送到另一个？

【发布时间】：2020-07-16 22:06:15

【问题描述】：

仍然习惯 React 并正确使用道具。

但基本上我有这个反应组件，我试图获取“drinkInfo”中的所有信息并使用道具将它们全部发送到 CardInfo 组件，以便我可以在那里呈现它。然而我得到“道具未定义”，我不确定为什么。

class Render  extends React.Component 

  constructor(props) 
        super(props);
  

componentDidMount() 
    // call the drinks endpoint (via axios)
      let options = 
        method: 'GET',
        url: MYURL,
      ;

    // let drinks = array of drinks
      let drinksFromDatabase =  [];
    // axios request
      axios.request(options)
        .then( (response) => 
          console.log(response);
          drinksFromDatabase =  response.data
          console.log("Drinks from Database are:")
          console.log(drinksFromDatabase)

          this.setState( drinks : drinksFromDatabase)
    )
    .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 nthing")
      return <div></div>
    


  let firstElement = stateArray[0];
  let drinks = firstElement.drinks; 

  let drinkChoice = this.props.reduxState.drinkChoice
  console.log("Drink Choice is: " , drinkChoice)

  let drinkInfo = 
    type: props.drinks.type,
    name:  props.drinks.name,
    manufacturer: props.drinks.manufacturer,
    rating: props.drinks.rating,
    date: props.drinks.date,
    description: props.drinks.description,
    favorite: props.drinks.favorite
  

  console.log("Drink info is: " , drinkInfo)

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

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


export default Render

【问题讨论】：

我认为您在不了解基本 javascript 的情况下试图进入非常复杂的领域。变量 props 未定义，您尝试定义 drinkInfo

我知道，这个错误告诉了我很多。我正尝试着学习。那你能给我更多的方向吗？谢谢！

你需要定义props，如果你要找的是this.props，像const props = this.props这样的东西会帮你做的

我现在明白了。谢谢你。现在它告诉我“props.drinks”是未定义的。但是，如果我控制台日志本身只是“饮料”，我会得到我试图传递的数据。知道为什么将道具放在它前面会使其未定义吗？

【参考方案1】：

我看到您正在将道具传递给您的组件。但是在使用 ComponentDidMount() 挂载组件后，您会收到饮料的响应。

在 ComponentDidMount() 中 this.SetState(drinks: DrinksFromDatabase) 已初始化，因此当您使用 console.log(drinks) 时，会记录饮料状态。

您可能需要重新阅读文档：

https://reactjs.org/docs/components-and-props.html

关于道具和状态。由于您设置了状态，因此您需要更改：

let drinkInfo = 
    type: props.drinks.type,
    name:  props.drinks.name,
    manufacturer: props.drinks.manufacturer,
    rating: props.drinks.rating,
    date: props.drinks.date,
    description: props.drinks.description,
    favorite: props.drinks.favorite
  

到：

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
      

由于您使用drinks.map(drink => ...) 进行迭代，因此您可以在组件中发送每个可迭代饮品的值：

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

然后您可以从您的 InfoCard 道具访问道具...但老实说，drinkInfo 似乎包含与您的状态饮料相同的信息，所以我不确定您为什么要创建一个对象值的对象，然后您可以更改以前的：

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

这将传递您所有的饮料值，而无需创建另一个对象。希望这能让您朝着正确的方向前进。

【讨论】：

老兄，这真是太有帮助了。你不知道我多么感谢你花时间为我安排事情。我肯定会再次浏览文档。其中一些概念仍然有点抽象，所以我正在尝试边做边学。再次感谢。

【参考方案2】：

您正在使用 react 类组件，所以您忘记添加 this 来访问道具。

this.props.drinks.type
this.props.drinks.name
 .....

【讨论】：

我现在明白了。谢谢你。现在它告诉我“props.drinks”是未定义的。但是，如果我控制台日志本身只是“饮料”，我会得到我试图传递的数据。知道为什么将道具放在它前面会使其未定义吗？

你确定你是从道具中得到饮料吗？因为在这一行this.setState( drinks : drinksFromDatabase)，您正在尝试更新名为drinks 的联合国状态。如果是这样，那么你应该做this.state.drinks.type。我认为您需要参考 React 文档 fr.reactjs.org/docs/getting-started.html ，状态和道具基础知识