React Axe ios: Как отправить только значение состояния моей опоры в бэкэнд

Question

Итак, я передал свое родительское состояние своему дочернему компоненту в качестве реквизита с названием title. Я хочу сделать запрос пут с топором ios, используя значение этого реквизита. Если я отображаю его в div, он возвращает значение состояния, но когда я помещаю его в параметры ax ios, это не так. Вместо этого в моем журнале консоли он показывает объект поддержки:

{$$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', а затем передаю его в запрос топора ios put, база данных регистрируется, и это работает. Так что мой внутренний код в порядке, но я не уверен, почему реквизиты не дают мне только значение состояния.

Фрагмент сокращенного кода:

Parent (компонент под названием Foods):

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

До этого момента я использовал реакцию для рендеринга реквизита и передачи данных и состояния другим компонентам, но я Я застрял сейчас, где я хочу, чтобы дочерний компонент получал данные о состоянии и отправлял их на сервер. Может быть, я использую неправильную процедуру или неправильные инструменты для работы?

Answer 1

Можете ли вы опубликовать фрагмент кода того, как вы передаете состояние родителя ребенку?