相关疑难解决方法(0)

我试图通过使用这样的嵌套属性来组织我的状态:

this.state = {
   someProperty: {
      flag:true
   }
}

但是像这样更新状态,

this.setState({ someProperty.flag: false });

不起作用.怎么能正确完成？

考虑下面的钩子示例

   import { useState } from 'react';

   function Example() {
       const [count, setCount] = useState(0);

       return (
           <div>
               <p>You clicked {count} times</p>
               <button onClick={() => setCount(count + 1)}>
                  Click me
               </button>
          </div>
        );
     }

基本上，我们使用this.forceUpdate（）方法强制组件在React类组件中立即重新呈现，如下例所示

    class Test extends Component{
        constructor(props){
             super(props);
             this.state = {
                 count:0,
                 count2: 100
             }
             this.setCount = this.setCount.bind(this);//how can I do this with hooks in functional component 
        }
        setCount(){
              let count = this.state.count;
                   count = count+1;
              let count2 = this.state.count2;
                   count2 = count2+1;
              this.setState({count});
              this.forceUpdate();
              //before below …

我有一个无状态组件,我想重新渲染它.我怎么能这样做？我试过用this,但没用.

我可以改用forUpdate或其他东西吗？

我正在研究反应项目。当我们单击重新加载按钮时，我试图重新加载组件。我实现了如下所示的 onClick 函数。但它正在重新加载整个窗口。我只想重新加载那个类组件，而不是整个窗口。谁能帮我解决这个问题？

refreshPage() {
    window.location.reload();
  }

我在pages/post/index.js 中使用 getServerSideProps ：

import React from "react";
import Layout from "../../components/Layout";

function Post({ post }) {
  console.log("in render", post);
  return (
    <Layout title={post.name}>
      <pre>{JSON.stringify(post, undefined, 2)}</pre>
    </Layout>
  );
}

export async function getServerSideProps({ query }) {
  return fetch(
    `${process.env.API_URL}/api/post?id=${query.id}`
  )
    .then(result => result.json())
    .then(post => ({ props: { post } }));
}

export default Post;

当我直接加载/post/2它时，它按预期工作，但是当我通过单击链接从/posts到时/post/2：

<Link
  as={`/post/${post.id}`}
  href={`/post?id=${post.id}`}
>

看起来 2 秒（api 延迟）没有任何反应，然后显示内容。我可以在fetchNextData_next/data/development/post/9.json加载的网络选项卡中看到。 …

我的ReactJS组件包含一个iframe。为了响应外部页面中的事件，我需要重新加载iframe。如果用户已导航到iframe中的另一个页面，则需要将其重置为首次加载该页面时所具有的URL。该网址在中可用this.props。

我尝试使用forceUpdate()。我可以看到这导致该render方法运行，但是iframe不会重置-大概是因为React无法告诉您任何更改。

目前，我正在向iframe的查询字符串添加一些随机文本：此网址更改会强制React重新呈现iframe。但是，这感觉有点脏：iframe中的页面超出了我的控制范围，因此谁知道这个额外的querystring值可能会做什么呢？

resetIframe() {
    console.log("==== resetIframe ====");
    this.forceUpdate();
}

public render() {
    console.log("==== render ====");

    // How can I use just this.props.myUrl, without the Math.random()?
    let iframeUrl = this.props.myUrl + '&random=' + Math.random().toString();

    return <div>
        <button onClick={() => { this.resetIframe(); }}>Reset</button>
        <iframe src={iframeUrl}></iframe>
    </div>
}

（如果这有所作为，我也使用TypeScript。）

我想在每次由于道具更改而重新渲染时在反应组件上播放动画：

反应：

function Card({ cardText }) {
  return <div className="roll-out">{cardText}<div/>
}

所以我做了css：

function Card({ cardText }) {
  return <div className="roll-out">{cardText}<div/>
}

但是，动画仅在初始渲染时播放一次。我想每次<Card />由于cardText更改而重新渲染时都播放它。我怎样才能实现它？

我是新来的反应.如何在单击反应按钮后才渲染组件？

在我的情况下,单击一个按钮,我必须显示一个表格,显示数据库中的数据.

我在下面附上了我的代码供您参考,第一个组件是按钮组件,下面是您可以找到该组件的组件.

此外,我想知道如何刷新组件单击按钮而不刷新整个页面.

var Button = React.createClass({
render: function () {
        return (
           <button type="button">Display</button>

            ); }
});

var EmployeeRow = React.createClass({

    render: function () {
        return (
            <tr>
                  <td>{this.props.item.EmployeeID}</td>
                  <td>{this.props.item.FirstName}</td>
                  <td>{this.props.item.LastName}</td>
                  <td>{this.props.item.Gender}</td>                                                   
              </tr>

            );
    }
});

  var EmployeeTable = React.createClass({

      getInitialState: function(){

          return{
              result:[]
          }
      },
      componentWillMount: function(){

          var xhr = new XMLHttpRequest();
          xhr.open('get', this.props.url, true);
          xhr.onload = function () {
              var response = JSON.parse(xhr.responseText);

              this.setState({ result: response });

          }.bind(this);
          xhr.send();
      },
      render: function(){
          var rows = []; …

我试图在Nextjs应用程序中更改路线时实现一个加载屏幕，例如/ home-> / about。

我当前的实现如下。我将初始加载状态设置为false，然后在componentDidMount上进行更改。我也调用Router.events.on内部功能componentDidMount路由变化开始时改变负荷状态。

_app.js在页面文件夹中

class MyApp extends App {
  constructor(props) {
    super(props);
    this.state = {
      loaded: false,
    };
  }

  componentDidMount() {
    this.setState({ loaded: true });
    Router.events.on('routeChangeStart', () => this.setState({ loaded: false }));
    Router.events.on('routeChangeComplete', () => this.setState({ loaded: true }));
  }



  render() {
    const { Component, pageProps } = this.props;

    const { loaded } = this.state;

    const visibleStyle = {
      display: '',
      transition: 'display 3s',
    };
    const inVisibleStyle = {
      display: 'none', …