Форма отправки React не перерисовывается

Я делаю 2 реагирующих компонента (PlayerSearch для заполнения формы, содержащей имя целевого игрока, и PlayerAPI для получения запроса). Я хочу, чтобы он повторно отображал PlayerAPI каждый раз, когда я нажимаю кнопку отправки ИЛИ каждый раз, когда отправленные данные обновляются. Итак, мой код выглядит так: В поиске игроков:

export function PlayerSearch() {
  const [formData, setFormData] = useState({ APIkey: "", name: "" });
  const [submittedData, setsubmittedData] = useState({ submittedAPIkey:"", submittedname:"" });
  

  const onChange = (event) => {
    setFormData({ ...formData, [event.target.name]: event.target.value });
  };

    function handlesubmit(e) {
      e.preventDefault();
      setsubmittedData({ ...submittedData, submittedAPIkey: formData.APIkey, submittedname: formData.name });
    }

    return <div className='player'>
      <div className='inputfield'>
        <form onSubmit = {handlesubmit} method='GET' autoComplete = "off">
          <div>
            <label htmlFor = "APIkey">Your API key:</label>
            <input placeholder='Your API key' onFocus = {(e)=>{e.target.placeholder=''}} type = "text" id = "APIkey" name = "APIkey" value = {formData.APIkey} onChange = {onChange}/>
          </div>
          <div>
            <label htmlFor = "name">Player name:</label>
            <input placeholder='Player name' onFocus = {(e)=>{e.target.placeholder=''}} type = "text" id = "name" name = "name" value = {formData.name} onChange = {onChange}/>
          </div>
          <div>
            <button type='submit'>Submit</button>
          </div> 
        </form>
      </div>
      <div id='result'>

//This is where I render the PlayerAPI

        {(submittedData.submittedAPIkey !== "" && submittedData.submittedname !== "") && <PlayerAPI APIkey = {submittedData.submittedAPIkey} name = {submittedData.submittedname} />}
      </div>
    </div>
  }

Обновлено: я узнал, что отправка формы не является проблемой. Проблема в PlayerAPI и я ее исправил.

PlayerAPI до:

export function PlayerAPI(props) {
  const [data, setdata] = useState({ accountId: ''});
  const getPlayerID = async () => {
    //some API fetching...
  }
    useEffect(()=>{
      getPlayerID();
    },[]);

    return <div>
        <div className='SearchResult'>
          hello {JSON.stringify(data)}
        </div>
      </div>;
  }

PlayerAPI сейчас:

import { useEffect, useState } from "react";

export function PlayerAPI(props) {
  const [data, setdata] = useState({ accountId: ''});
  const getPlayerID = async () => {
    //some API fetching...
  }
    useEffect(()=>{
      getPlayerID();
    },[props.name, props.APIkey]);

    return <div>
        <div className='SearchResult'>
          hello {JSON.stringify(data)}
        </div>
      </div>;
  }

Кажется, здесь, в песочнице кода, все работает отлично

RubenSmn 20.11.2022 12:48

@RubenSmn Вы правы, я обнаружил, что проблема здесь не в PlayerSearch, проблема в компоненте PlayerAPI. Я отредактировал вопрос сейчас.

lamsmallsmall 20.11.2022 20:25

Пожалуйста, добавьте компонент PlayerAPI

RubenSmn 20.11.2022 21:22

@RubenSmn Я исправил это, но я все еще могу опубликовать это здесь.

lamsmallsmall 21.11.2022 09:52
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
4
60
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

может это решение поможет? Настройка onSubmit в React.js

перемещение e.preventDefault(); до конца дескриптораОтправить

Ответ принят как подходящий

Я узнал, что отправка формы не является проблемой. Проблема в PlayerAPI и я ее исправил.

PlayerAPI до:

export function PlayerAPI(props) {
  const [data, setdata] = useState({ accountId: ''});
  const getPlayerID = async () => {
    //some API fetching...
  }
    useEffect(()=>{
      getPlayerID();
    },[]);

    return <div>
        <div className='SearchResult'>
          hello {JSON.stringify(data)}
        </div>
      </div>;
  }

PlayerAPI сейчас:

import { useEffect, useState } from "react";

export function PlayerAPI(props) {
  const [data, setdata] = useState({ accountId: ''});
  const getPlayerID = async () => {
    //some API fetching...
  }
    useEffect(()=>{
      getPlayerID();
    },[props.name, props.APIkey]);

    return <div>
        <div className='SearchResult'>
          hello {JSON.stringify(data)}
        </div>
      </div>;
  }

Так что, по-видимому, я почему-то подумал, что повторное нажатие кнопки отправки активирует начальный рендеринг useEffect в PlayerAPI, поэтому я оставил массив зависимостей пустым.

Другие вопросы по теме