Question

使用Repo类中的fetch方法加载数据很好，但是我无法传递它的组件，实际上我希望它重新渲染观察者组件，但它没有发生。他们在这里;

MenuComponent.tsx：

@observer
@inject('params')
class MenuComponent extends React.Component<{params?:IMenuModel[]}, {}> {
  render() {
    //params undefined.
    var menuJSX : JSX.Element[] = this.props.params ? this.props.params.map((item:IMenuModel, i:number)=>{
      return (<li key={item.Id}>{item.itemName}</li>)
    }):[];
    return render(){...}

MenuRepo.tsx：

class MenuRepo {
  @observable menuItems?: IMenuModel[];
  constructor() {
    this.getItems();
  }
  @action getItems(): void {
    fetch(`..`).then((response: Response): Promise<{ value: IMenuModel[] }> => {
        this.menuItems = [
          { Id: 1, itemName: 'test-item1', childItems: [] }
        ];//property setted here..
    })
      }
  }
export default new MenuRepo;

App.tsx;

import Menu from './components/MenuComponent';
import menuCodes from './components/MenuRepo';
class App extends React.Component<null, null> {   
  render() {
    return (
      <div className="App">
        <Menu params = {menuCodes.menuItems}/>
      </div>
    );
  }
}
export default App;

我检查了执行顺序，在fetch中设置观察字段（menuItems）之后，jsx渲染方法没有重新渲染。

Answer 1

尝试在此处撤消订单......来自此

dicts = {
   'PH' : {'Acidic': 0, 'Alkaline': 1, 'Neutral': 2},
   'S': {'Low': 0, 'High': 1, 'Medium': 2},
   # etc
} 
with open(your_file) as file:
    table = []
    reader = csv.DictReader(file)
    for row in reader:
        new_row = {key: dicts[key][value] for (key, value) in row.items()}
        table.append(new_row)

到此......

@observer
@inject('params')

from documentation:当同时使用@ inject和@observer时，请确保以正确的顺序应用它们：observer应该是内部装饰器，注入外部。中间可能还有其他装饰器。

渲染方法不是用可观察的数组更新触发的

1 个答案: