Форма отправки 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
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
[LXI-SpartaCodingClub Full-Stack Bootcamp in Indonesia] 2023/1/21 TIL/Week 15]
[LXI-SpartaCodingClub Full-Stack Bootcamp in Indonesia] 2023/1/21 TIL/Week 15]
Я научился создавать карусель в ReactJS с помощью библиотеки Splide.
Краткое введение в Styled-компоненты
Краткое введение в Styled-компоненты
В настоящее время популярность Styled-компонентов становится все больше и больше. Большинство проектов, построенных на React.js, используют эту...
ДЕНЬ 8 | Страница обзора в React
ДЕНЬ 8 | Страница обзора в React
На этом сегодня все, завтра снова увидимся с новым проектом!
Как настроить среду разработки React.
Как настроить среду разработки React.
Весь процесс настройки среды разработки react.
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, поэтому я оставил массив зависимостей пустым.

Как сейчас написано, ваш ответ неясен. Пожалуйста, отредактируйте , чтобы добавить дополнительные сведения, которые помогут другим понять, как это отвечает на заданный вопрос. Вы можете найти больше информации о том, как писать хорошие ответы в справочном центре.

Community 23.11.2022 10:45

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