React MobX 不会触发道具更改的重新渲染

Question

我是 MobX 的新手，我在调用异步操作时遇到了一些问题。我的商店有一个用于更新 observable 数组的异步函数：

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 中使用 React 检查器时，我可以看到道具正在更新。

对我哪里出错有什么建议吗？

Answer 1

您没有从组件的 render 方法中提供给 map 的函数返回任何内容。添加 return 关键字，它将按预期工作。

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

React MobX 不会触发道具更改的重新渲染

React MobX not triggering rerender on props change

typescript

reactjs

mobx

mobx-react