Javascript React Axios：如何将道具的状态值发送到后端

因此，我将父状态作为名为title的道具传递给子组件。我想使用该道具的值向axios发出put请求。如果我在div中渲染它，它将返回状态值，但当我将其放入axios参数时，它不会返回。相反，在我的控制台日志中，它显示了一个道具对象：

{$$typeof: Symbol(react.element), key: null, ref: null, props: {…}, type: ƒ, …}
$$typeof: Symbol(react.element)
type: class Title
key: null
ref: null
props: {title: "Godfather"}
_owner: null
_store: {validated: false}
_self: componentData {props: {…}, context: {…}, refs: {…}, updater: {…}, state: {…}, …}
_source: {fileName: "C:\Users\Craig\Desktop\project - Copy\client\src\components\Movies\SendingMovie.js", lineNumber: 20}
__proto__: Object

基本上，我只想发送“教父”。不是像上面那样的整个对象。 同样，当我为这个子组件创建一个虚拟状态并给它电影“教父”，然后 将其传递到axios put请求中，数据库注册并运行。所以我的后端代码很好，但是 我不知道为什么道具没有给我状态值

缩短的代码段：

母体（称为食物的成分）：

类投票扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
错误：null，
isLoaded:false，
食品：[]，
activefood:“”，//新添加的
};
...
render（）{
const title=this.state.activefood
返回(

title={title}

)
}

儿童：

import React, {
    Fragment,
    useState,
    useEffect,
    Component
} from "react";
import axios from "axios";
import Votes from './Foods';
import Title from './Title';


export default class SendingFood extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        error: null,
        clicked: false
    }
    this.handleClick = this.handleClick.bind(this);
}

handleClick() {
    this.setState({
        clicked: true,
    });
}


   patchFunction() {
     this.setState({isLoading: true});
    axios.patch('api/food/modify', {foodname: <Title title={this.props.title}/>})
        .then(res => {
          console.log(res);
            this.setState({
                 isLoading: false,
            })
           console.log('sent');
      },
              (error) => {
          this.setState({
            isLoaded: true,
            error

          });

        }
      )
    };


   combinedFunction() {
    this.patchFunction();
    this.handleClick();
}

 render(){
   const {isLoading, error} = this.state;
    if (error) {
      return <div style={{color: "red"}}>Error: {error.message}</div>;
    };
 return (
    <Fragment>
      <Title title={this.props.title}/>
   <button className="primary" onClick={() => {  this.patchFunction() }}>Submit Vote</button>

     </Fragment>
          )}
  }

import-React{
碎片，
useState，
使用效果，
组成部分
}从“反应”；
从“axios”导入axios；
从“./食品”导入投票；
从“./Title”导入标题；
导出默认类SendingFood.Component{
建造师（道具）{
超级（道具）；
此.state={
错误：null，
单击：false
}
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
这是我的国家({
对,，
});
}
patchFunction（）{
this.setState（{isLoading:true}）；
patch（'api/food/modify'，{foodname:}）
。然后（res=>{
控制台日志（res）；
这是我的国家({
孤岛加载：false，
})
console.log（'sent'）；
},
（错误）=>{
这是我的国家({
isLoaded：是的，
错误
});
}
)
};
组合函数（）{
此函数为.patch函数（）；
这个。handleClick（）；
}
render（）{
const{isLoading，error}=this.state；
如果（错误）{
返回错误：{Error.message}；
};
返回(
{this.patchFunction（）}}>提交投票
)}
}

---

import-React{
碎片，
useState，
使用效果，
组成部分
}从“反应”；
导出默认类标题扩展React.Component{
render（）{
返回(
{this.props.title}
);
}
}

---

到目前为止，我一直在使用react来渲染道具，并将数据和状态传递给其他组件，但我现在陷入了一个困境，我想让一个子组件接收状态数据并将其发送到后端。也许我使用了错误的过程或错误的工具来完成这项工作？

能否发布一段代码，说明如何传递状态父母对孩子？

你能发布一段代码，说明你是如何将父母的状态传递给孩子的吗？

你有没有看过这个我的道具是从我的父母那里被调用的，其中onlick给出了一个状态变化，本质上是动态的。我捕捉到了这一点，并将其传递给我的孩子。你刚才提到了一个问题，某人是在哪里得到的ting一个req.body错误。我没有收到任何错误。请正确阅读问题。您是否看到了这一点？我的道具是从我的父母那里调用的，其中onlick给出了一个状态更改，本质上是动态的。我捕获了它并将其传递给我的孩子。您刚刚引用了一个有人收到req.body错误的问题。我没有收到任何错误。pl请仔细阅读问题。

import React, {
    Fragment,
    useState,
    useEffect,
    Component
} from "react";
import axios from "axios";
import Votes from './Foods';
import Title from './Title';


export default class SendingFood extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        error: null,
        clicked: false
    }
    this.handleClick = this.handleClick.bind(this);
}

handleClick() {
    this.setState({
        clicked: true,
    });
}


   patchFunction() {
     this.setState({isLoading: true});
    axios.patch('api/food/modify', {foodname: <Title title={this.props.title}/>})
        .then(res => {
          console.log(res);
            this.setState({
                 isLoading: false,
            })
           console.log('sent');
      },
              (error) => {
          this.setState({
            isLoaded: true,
            error

          });

        }
      )
    };


   combinedFunction() {
    this.patchFunction();
    this.handleClick();
}

 render(){
   const {isLoading, error} = this.state;
    if (error) {
      return <div style={{color: "red"}}>Error: {error.message}</div>;
    };
 return (
    <Fragment>
      <Title title={this.props.title}/>
   <button className="primary" onClick={() => {  this.patchFunction() }}>Submit Vote</button>

     </Fragment>
          )}
  }

import React, {
    Fragment,
    useState,
    useEffect,
    Component
} from "react";

    export default class Title extends React.Component{
        render() {
            return (
                <Fragment>
                {this.props.title}
                </Fragment>
            );
        }
    }