Question

我对开始使用reactjs的结果感到有点失望。

我现在只想从一个简单的宁静的ws解析json数据。

如果我把chrome的url设置为查询，它会正确回答json数组：

[{"label":"TestLabel!!","value":7,"rating":17.25},{"label":"TestLabel2 !!","value":8,"rating":18.25}]

这是我的React组件：

export default class ItemLister extends React.Component {

    constructor() {
        super();
        this.state = { items: [{"label":"Test1!!","value":7,"rating":17.25}] };
    } 

     componentDidMount() {
        fetch('/rest/json/product/get') 
            .then(result=> { 
                this.state.items.push(result); 
            });
    }

    render() {
      return(
                <div>
                    <div>Items:</div>
                    {
                        this.state.items.map(function(item, i){
                           return <div key={i}>{item.label}</div> 
                        }
                    )}          
                </div>  
            );
    }
}

经过大量调整后，这显示没有错误，但列表没有任何反应，只显示了构造函数元素。

请指出我正确的方向......

感谢

解决：

＆＃34; setState（）＆＃34;正如所建议的那样是问题的一部分。另一部分是我管理json答案的方式。

这样项目的工作原理：

 componentDidMount() {
     fetch('/rest/json/product/get') 
        .then(response => response.json())
        .then(response => {  
          this.setState({items:  response });
        })
 }

但是我只是尝试了另一种方式来实现这个电话，因为我完全迷失了。我感到有点困惑。实现获取的正确方法是什么？

无论如何......这没关系。

Answer 1

阅读Docs中的最后一行：

永远不要直接改变this.state，因为之后调用setState（）可能会替换你所做的突变。把this.state看作是不可变的。

试试这个：
this.setState((state) => ({ items: state.items.concat(result) }))

如果结果是数组，你可以这样做：
this.setState({ items: [...this.state.items , ...result] })

Answer 2

尝试this.setState('items',result)

ReacJs并获取json并更新状态prop

2 个答案: