Блог

Главная - Вопросы по программированию - как заставить дочернего элемента повторно отображать другим дочерним действием?

как заставить дочернего элемента повторно отображать другим дочерним действием?

#javascript #reactjs

#javascript #reactjs

Вопрос:

у меня есть приложение, подобное

 export default function App(props) {
    return <>
        <FooList />
        <hr/>
        <CreateFoo />
    </>;
}

мой FooList — это класс, подобный

 export default class FooList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            foos = []
        };
    }

    componentDidMount() {
        Axios.get('/getFooListPath').then(res=>{
            this.setState({foos=> res.data});
        }).catch(err=>{
            console.log(err);
        });
    }

    render() {
        const mapedFoos = this.state.foos.map((foo, i)=><li key={i}>foo</li>);
        return <ul>mapedFoos</ul>;
    }
}

и CreateFoo похоже

 export default function CreateFoo(props) {
    const [txt, setTxt] = useState("");
    const handleChange = (event) => setTxt(event.target.value);
    const handleChange = () => {
        Axios.post("/createFooPath", txt).then(res=>{
            // TODO : maybe calling some method here
        }).catch(err=>{
            console.log(err);
        });
    };
    return <>
        <input type="text" onChnage={handleChange} />
        <button onClick={handleClick} >create</button>
    </>;
}

проблема в том, что я хочу повторно отобразить fooList после того, как я успешно создал foo.

я уже думал о переходе foos к родительскому App элементу и отправке его FooList в качестве реквизита. но я хочу сделать его FooList независимым от родительского, поэтому, где бы я ни хотел его использовать, он показывает мне текущий foos в базе данных

Комментарии:

1. Вам нужно добавить свой логический App компонент axios. Таким образом, если какой-либо реквизит изменен, оба компонента будут отображаться снова

2. Похоже, что повышение состояния до общего родительского элемента будет работать хорошо.

3. Пожалуйста, смотрите для этого раздел Подъем состояния вверх .

4. @ksav … если я сделаю это так, что везде, где я хочу использовать fooList, мне придется снова извлекать foos из родительского элемента

5. Что -то нужно координировать, когда создается новый Foo (post’ed), чтобы получить FooList повторную выборку… Кажется, вы можете обновить некоторое состояние в App , которое передается FooList , чтобы «пнуть» его в выборку данных. Другой вариант — опрос в FooList , но это очень неоптимально.