Блог

Главная - Вопросы по программированию - React MobX не запускает повторный запуск при изменении реквизита

React MobX не запускает повторный запуск при изменении реквизита

#reactjs #typescript #mobx #mobx-react

#reactjs #машинописный текст #mobx #mobx-реагировать

Вопрос:

Я новичок в MobX, и у меня возникли некоторые проблемы с вызовом асинхронных действий. В моем хранилище есть асинхронная функция для обновления массива observabel: 

 export class AccountStore implements IAccountStore {
@observable accounts:any = [];
@observable state = "pending"; // "pending" / "done" / "error"

@action
public async getAccounts() {
    this.state = "pending"
    try {
        const res = await accountsService.getAll();
        runInAction(() => {
            console.log(res);
            this.state = "done";
            this.accounts.replace(res.data);
        })
    } catch (error) {
        runInAction(() => {
            this.state = error;
        })
    }
}

}

Но мой компонент не выполняет повторный запуск при обновлении (которое вызывается в componentDidMount):

 interface AppProps {
accountStore: IAccountStore
}

@inject('accountStore')
@observer
class AllAcounts extends Component<AppProps, any> {
constructor(props: any) {
    super(props);
}

public componentDidMount() {
    this.props.accountStore.getAccounts();
    console.log(this.props.accountStore)
}

render() {
    const accounts = this.props.accountStore.accounts;
    return (
        <div>
            <h4>All accounts</h4>
            {accounts.map((item: any, index: number) => {
                <p key={index}>{item.name}</p>
            })
            }
            <button onClick={() => this.props.accountStore.getAccounts()}>Update</button>
        </div>
    );
}
}

export default AllAcounts;

Я вижу, что реквизиты обновляются, когда я использую инспектор реакции в Chrome.

Есть предложения, где я ошибаюсь?

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

1. Компонент не будет повторно отображаться при изменении реквизита, если вы не укажете ему что-то вроде shouldComponentUpdate или getDerivedStateFromProps .

2. вы подписываетесь на изменения?

3. У меня сложилось впечатление, что @observer будет отслеживать обновления? Как бы я подписался?

4. просто дополнение к ответу @Tholle, если в map нет логики и вы хотите просто вернуть тег, который вы можете использовать ( вместо { like {accounts.map((item, index) => (<p key={index}>{item.name}</p>) )} , чтобы он работал как return

Ответ №1:

Вы ничего не возвращаете из функции, заданной map в методе рендеринга вашего компонента. Добавьте return ключевое слово, и оно будет работать так, как ожидалось.

 {accounts.map((item, index) => {
  return <p key={index}>{item.name}</p>;
})}