Блог

Я создаю приложение react, в котором мне нужно отправить массив из дочернего компонента в родительский компонент. Сейчас я пытаюсь отправить сообщение с помощью функции обратного вызова, но она не работает.

Вот мой детский компонент:

 var apis=[]
export default class ApiDropDown extends React.Component {
  constructor() {
    super();
    this.state = {
      options: [],
      suboptions: [],
    };
  }

  componentDidMount() {
    this.fetchOptions();
  }

  fetchOptions() {
    fetch("http://localhost:5000/groups")
      .then((res) => {
        return res.json();
      })
      .then((json) => {
        this.setState({ options: json });
      });
  }
  //SETTING THE apis here,just adding few elements,its a long function
  onSubmit()
  {
    this.props.apisgranted(apis)
  }


  render() {
  
    return (
      
       
        <div>
          <button type="button" className="btn" onSubmit={this.onSubmit}> //Save button to set data in the prop.
            Save
          </button>
        </div>
      
    );
  }
}
 

Теперь вот мой родительский компонент:

 const AddTask = ({ onAdd, onStatusChange }) => {
  const [client_name, setText] = useState("");
  const [status, setStatus] = useState("");
  const [showMessage,setMessage]=useState(false)
  const [apigrants,setapigrants]=useState([])

  
 const handleApiGrants = (langValue) => {
    
    setapigrants(langValue) //setting the props array here from child component
    console.log(apigrants)  //nothing gets printed here
}


 

 
  
  return (
    <form className="add-form" onSubmit={onSubmit}>
      <div>
   
      <button onClick={setmessage.bind(false, true)} type="button" className="btn">Grant API's</button>
      
      { showMessage amp;amp; (<ApiDropDown apisgranted={handleApiGrants} />) } //calling the props handling function where which should set the apigrants array with props array.
      
      </div>
 

В моем дочернем компоненте я использую onSubmit функцию для установки массива в prop.
В моем родительском компоненте сначала я объявляю apigrants массив пустым,а затем присваиваю его массиву prop из дочернего компонента с помощью handleApiGrants функции.

Самый простой способ сделать это-определить переменную в родительском компоненте, а также передать ее дочернему элементу, как вы делаете с handleApiGrants