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

Question

所以，我已经将我的父状态作为名为 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

基本上，我只想发送'Godfather'。不是像上面那样的整个对象。 另外，当我为这个子组件创建一个虚拟状态并给它movie: 'Godfather' 然后 将它传递给 axios put 请求，数据库注册并且它可以工作。所以我的后端代码很好但是 我不确定为什么 props 没有给我状态值。

缩短的代码片段：

父（称为食物的组件）：

class Votes extends Component {
  constructor(props, context) {
    super(props, context);
   this.state = {
   error: null,
   isLoaded: false,
   foods: [],
   activefood:'', //new added
};

...

render() {
     const title = this.state.activefood
     return(
     <p>
      title={title}
     </p>
)
}

孩子：

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>
            );
        }
    }

到目前为止，我一直在使用 react 来渲染 props 并将数据和状态传递给其他组件，但我现在被困在我希望子组件接收状态数据并将其发送到后端的地方。也许我在工作中使用了错误的程序或错误的工具？

Answer 1

你能发布一个你如何将父母的状态传递给孩子的代码的sn-p吗？