Question

是否可以在<link href="https://p.w3layouts.com/demos/28-03-2016/shoppy/web/css/bootstrap.css" rel="stylesheet" type="text/css" media="all"> <link href="https://p.w3layouts.com/demos/28-03-2016/shoppy/web/css/style.css" rel="stylesheet" type="text/css" media="all"> <script src="https://p.w3layouts.com/demos/28-03-2016/shoppy/web/js/jquery-2.1.1.min.js"></script> <div class="page-container sidebar-collapsed"> <div class="left-content"> <div class="mother-grid-inner">     <div class="inner-block">  <div class="market-updates"> <div class="col-md-4 market-update-gd"> </div> <div class="col-md-4 market-update-gd"> </div> <div class="col-md-4 market-update-gd"> </div> <div class="clearfix"> </div> </div>   <div style="margin: 0 auto;text-align: center;margin-top: 5px;"></div>  <div class="chit-chat-layer1"> <div class="col-md-6 chit-chat-layer1-left"> </div> <div class="col-md-6 chit-chat-layer1-rit"> </div> <div class="clearfix"> </div> </div>    <div class="main-page-charts"> <div class="main-page-chart-layer1"> <div class="col-md-6 chart-layer1-left"> </div> <div class="col-md-6 chart-layer1-right"> <div class="user-marorm"> </div> </div> <div class="clearfix"> </div> </div> </div>  <div class="chart-layer-2"> <div class="col-md-6 chart-layer2-right"> </div> <div class="col-md-6 chart-layer2-left"> </div> <div class="clearfix"> </div> </div>  <div class="climate"> <div class="col-md-4 climate-grids"> </div> </div>  </div>    </div> </div>  <div class="sidebar-menu"> <div class="logo"> <a href="#" class="sidebar-icon"> <span class="fa fa-bars"></span> </a> <a href="#"> <span id="logo"></span>  </a> </div> <div class="menu"> <ul id="menu"> <li id="menu-home"><a href="index.html"><i class="fa fa-tachometer"></i><span style="position: absolute;">Dashboard</span></a></li> <li><a href="#"><i class="fa fa-cogs"></i><span style="position: absolute;">Components</span><span class="fa fa-angle-right" style="float: right; position: absolute;"></span></a> <ul> <li><a href="grids.html">Grids</a></li> <li><a href="portlet.html">Portlets</a></li> </ul> </li> <li id="menu-comunicacao"><a href="#"><i class="fa fa-book nav_icon"></i><span style="position: absolute;">Element</span><span class="fa fa-angle-right" style="float: right; position: absolute;"></span></a> <ul id="menu-comunicacao-sub"> <li id="menu-mensagens" style="width: 120px"><a href="buttons.html">Buttons</a> </li> <li id="menu-arquivos"><a href="typography.html">Typography</a></li> <li id="menu-arquivos"><a href="icons.html">Icons</a></li> </ul> </li> <li><a href="maps.html"><i class="fa fa-map-marker"></i><span style="position: absolute;">Maps</span></a></li> <li id="menu-academico"><a href="#"><i class="fa fa-file-text"></i><span style="position: absolute;">Pages</span><span class="fa fa-angle-right" style="float: right; position: absolute;"></span></a> <ul id="menu-academico-sub"> <li id="menu-academico-boletim"><a href="login.html">Login</a></li> <li id="menu-academico-avaliacoes"><a href="signup.html">Sign Up</a></li> </ul> </li> <li><a href="charts.html"><i class="fa fa-bar-chart"></i><span style="position: absolute;">Charts</span></a></li> <li><a href="#"><i class="fa fa-envelope"></i><span style="position: absolute;">Mailbox</span><span class="fa fa-angle-right" style="float: right; position: absolute;"></span></a> <ul id="menu-academico-sub"> <li id="menu-academico-avaliacoes"><a href="inbox.html">Inbox</a></li> <li id="menu-academico-boletim"><a href="inbox-details.html">Compose email</a></li> </ul> </li> <li><a href="#"><i class="fa fa-cog"></i><span style="position: absolute;">System</span><span class="fa fa-angle-right" style="float: right; position: absolute;"></span></a> <ul id="menu-academico-sub"> <li id="menu-academico-avaliacoes"><a href="404.html">404</a></li> <li id="menu-academico-boletim"><a href="blank.html">Blank</a></li> </ul> </li> <li><a href="#"><i class="fa fa-shopping-cart"></i><span style="position: absolute;">E-Commerce</span><span class="fa fa-angle-right" style="float: right; position: absolute;"></span></a> <ul id="menu-academico-sub"> <li id="menu-academico-avaliacoes"><a href="product.html">Product</a></li> <li id="menu-academico-boletim"><a href="price.html">Price</a></li> </ul> </li> </ul> </div> </div> <div class="clearfix"> </div> </div>内设置状态，还是我必须在render()期间进行设置？我没有找到类似的问题要回答，可能是因为我没有问正确的问题，但是我希望这是有道理的。这是我的代码：

fetching

如果需要，这里是我的<FlatList data={ this.state.newimage} ItemSeparatorComponent = {this.FlatListItemSeparator} renderItem={({item}) => <View> //Want to set item.id as a state <Text>{item.id}</Text> </View> />：

fetch

所有JSON代码：

fetch(`https://www.example.com/React/images.php`, {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
}).then((response) => response.json())
    .then((responseJson) => {

     this.setState({
        dataSource: responseJson, //<-- This is uneeded data
        newimage:  responseJson[0].image.map(item => ({ ...item, progress: new Animated.Value(0), unprogress: new Animated.Value(1) }))
        //mapping is only for animating the likes, adds a unique progress to the json array
       },function() {

       });



}).catch((error) => {
  //console.error(error);
});

Answer 1

我只是在猜测，但我相信您想拥有一个拥有状态的组件，而您的其他一些组件将呈现状态，并使用一些单击事件来更新状态

在下面的代码中，BreedLikeList是国家的所有者，并确保喜欢的东西是发送到List组件（称为{{1 }}仅用于呈现单个品种，并将任何点击转发给位于breedView上的给定事件。

状态更新后，BreedLikeList将呈现其状态，这将续订单个项目。

如果我根据问题或评论弄错了问题，请让我知道你丢失了什么。

代码不是本机的，但是我想状态处理与默认的反应状态没有什么不同。

下面的代码不会保存对状态的更改，只要页面不刷新，类似的内容就会出现在新的加载中，而数据将消失。显然，如何处理应用程序中的状态仍然是您必须做出的决定

BreedLikeList

// small list component, just group some of the data to the given itemTemplate
class List extends React.Component {
  render() {
    const { items, itemTemplate, onItemClicked } = this.props;
    return (
      <div className="list">
        { items && items.map( (item, key) => React.createElement( itemTemplate, { onItemClicked, item, key } ) ) }
      </div>
    );
  }
}

// a functional component that shows the current breeds, and if any likes, how many are there
// through click event, the likes get increased
const breedView = ( { item, onItemClicked } ) => {
  const { breed, likes } = item;
  return <span className="breed" onClick={ () => onItemClicked( breed ) }>
    { breed }
    { likes > 0 && <span className="like">+ { likes }</span> }
  </span>;
};

// class component that loads the data and keeps the likes
// upon state changes rerenders so that likes are visible for the users
// this state will re-initialize as soon as the page gets reloaded
class BreedLikeList extends React.Component {
  constructor() {
    super();
    this.state = {
      breeds: [],
      liked: {}
    };
    this.onBreedLiked = this.onBreedLiked.bind( this );
  }
  componentWillMount() {
    this.mounted = true;
    fetch('https://dog.ceo/api/breeds/list/all')
      .then( response => response.json() )
      .then( json => this.mounted && this.setState( { breeds: Object.keys( json.message ) } ) );
  }
  componentWillUnmount() {
    this.mounted = false;
  }
  onBreedLiked( breed ) {
    this.setState( { liked: { ...this.state.liked, [breed]: (this.state.liked[breed] || 0) + 1 } } );
  }
  render() {
    const { breeds, liked } = this.state;
    return <List 
      items={ breeds.map( breed => ({ breed: breed, likes: liked[breed] || 0 }) ) }
      itemTemplate={ breedView }
      onItemClicked={ this.onBreedLiked }
    />;
  }
}

// render everything
const target = document.querySelector('#container');
ReactDOM.render( <BreedLikeList />, target );

.breed {
  display: block;
  cursor: pointer;
  padding: 5px;
}
.breed:hover {
  background-color: #dfdfdf;
}
.like {
  display: inline-block;
  font-size: small;
  padding: 3px;
}

如何在React Native中将渲染项目设置为状态？

1 个答案: