Question

我有一个简单的React组件，该组件应该从api检索一些对象并将其显示在屏幕上。问题是，保存我的数据的属性似乎总是具有未定义的值。在C＃中，我有一个Property类：

public class Property
{
    public int PropertyID { get; set; }
    public string Name { get; set; }
}

我组件的父级从api获取这些列表，并将它们作为道具传递。这是我的组件：

export interface IPropertySearchResult {
    PropertyID: number,
    Name: string
}

export interface IPropertySearchResults {
    Results: IPropertySearchResult[]
}

export interface IPropertyWindowProps {
    Properties: IPropertySearchResults
}

export interface IPropertyWindowState {
}

export class PropertyWindow extends React.Component<IPropertyWindowProps, 
IPropertyWindowState> {
    constructor(props: IPropertyWindowProps) {
    super(props);
    }

render() {
    return (
        <div >
            <ul>
                {
                    this.props.Properties && this.props.Properties.Results ?                        
                        this.props.Properties.Results.map((p: IPropertySearchResult, idx: number) =>
                            <li key={idx}> <PropertyEditor Property={p} /> </li>)                        
                        : 'properties null'
                }
            </ul>
        </div>
    );
}

}

如下图所示，this.props.Properties包含我需要的对象，但由于某种原因，this.props.Properties.Results始终标记为未定义。

。

更新

我认为问题与我读取数据的方式有关。我有我的控制器：

[HttpGet("Search")]
public IActionResult GetProperties()
{
    var props = new Property[]
    {
        new Property(){PropertyID=1, Name="default1"},
        new Property(){PropertyID=2, Name="default2"},
        new Property(){PropertyID=3, Name="default3"},
        };

        return Ok(new { Properties = props });
    }
}

及其客户：

export class PropertyReader {
    public static search(): Promise<IPropertySearchResults> {
        return new Promise<IPropertySearchResults>((resolve, reject) => {
            axios.get(`api/Settings/Search`)
                .then(res => {
                    resolve(res.data);
                });
        });
    }
}

然后我的组件的父级调用客户端：

    componentDidMount() {
        PropertyReader.search()
            .then(p => this.setState({ properties: p }));
    }

由于某种原因，它正在创建一个IPropertySearchResults，并将数据放入动态添加的数组中，而不是放入结果数组中。

Answer 1

事实证明，这确实是一个愚蠢的解决方案。这些值将保存到具有小写字母名称的属性中。我不得不改变

export interface IPropertySearchResults {
    Results: IPropertySearchResult[]
}

到

export interface IPropertySearchResults {
    results: IPropertySearchResult[]
}

属性始终在React组件中未定义

1 个答案: