Я делаю 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 Вы правы, я обнаружил, что проблема здесь не в PlayerSearch, проблема в компоненте PlayerAPI. Я отредактировал вопрос сейчас.
Пожалуйста, добавьте компонент PlayerAPI
@RubenSmn Я исправил это, но я все еще могу опубликовать это здесь.
может это решение поможет? Настройка 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, поэтому я оставил массив зависимостей пустым.
Как сейчас написано, ваш ответ неясен. Пожалуйста, отредактируйте , чтобы добавить дополнительные сведения, которые помогут другим понять, как это отвечает на заданный вопрос. Вы можете найти больше информации о том, как писать хорошие ответы в справочном центре.
Кажется, здесь, в песочнице кода, все работает отлично