相关疑难解决方法(0)

我知道React可以异步和批量执行状态更新以进行性能优化.因此,在调用之后,您永远不能相信要更新的状态setState.但是你可以信任的反应更新相同的顺序状态setState被称为对

1. 相同的组件？
2. 不同的组件？

考虑单击以下示例中的按钮:

1.是否有可能a是假的,b对于:

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = { a: false, b: false };
  }

  render() {
    return <Button onClick={this.handleClick}/>
  }

  handleClick = () => {
    this.setState({ a: true });
    this.setState({ b: true });
  }
}

2.是否有可能a是假的,b对于:

class SuperContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { a: false };
  }

  render() {
    return <Container setParentState={this.setState.bind(this)}/>
  }
}

class Container …

所以我有这个:

let total = newDealersDeckTotal.reduce(function(a, b) {
  return a + b;
},
0);

console.log(total, 'tittal'); //outputs correct total
setTimeout(() => {
  this.setState({dealersOverallTotal: total});
}, 10);

console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); //outputs incorrect total

newDealersDeckTotal只是一个数字数组,[1, 5, 9]但是this.state.dealersOverallTotal不能给出正确的总数但是total呢？我甚至提出了超时延迟,看看是否解决了这个问题.任何明显的或我应该发布更多的代码？

我试图理解一些有些"神奇"行为的根本原因,我看到我无法完全解释,而且从阅读ReactJS源代码中看不出来.

setState在响应onChange输入事件时同步调用方法时,一切都按预期工作.输入的"新"值已经存在,因此DOM实际上没有更新.这是非常需要的,因为它意味着光标不会跳转到输入框的末尾.

但是,当运行具有完全相同结构但setState 异步调用的组件时,输入的"新"值似乎不存在,导致ReactJS实际触摸DOM,这导致光标跳转到结束输入.

显然,value在异步情况下,某些东西正在干预将输入"重置"回其先前的情况,而在同步情况下它并没有这样做.这是什么机制？

同步示例

var synchronouslyUpdatingComponent =
    React.createFactory(React.createClass({
      getInitialState: function () {
        return {value: "Hello"};
      },

      changeHandler: function (e) {
        this.setState({value: e.target.value});
      },

      render: function () {
        var valueToSet = this.state.value;

        console.log("Rendering...");
        console.log("Setting value:" + valueToSet);
        if(this.isMounted()) {
            console.log("Current value:" + this.getDOMNode().value);
        }

        return React.DOM.input({value: valueToSet,
                                onChange: this.changeHandler});
    }
}));

请注意,代码将登录render方法,打印出value实际DOM节点的当前值.

在两个Ls"Hello"之间键入"X"时,我们看到以下控制台输出,并且光标保持在预期的位置:

Rendering...
Setting value:HelXlo
Current value:HelXlo

异步示例

var asynchronouslyUpdatingComponent =
  React.createFactory(React.createClass({
    getInitialState: function () {
      return …

我使用React并使用画布.我想将画布更改为WebGL(Threejs库).如何将此库连接到React？

我有一些元素,例如

<div ref="threejs"></div>

如何使它成为Threejs库调用的字段？PS:.我不想使用像react-threejs这样的扩展

我有一个组件MyComponent，其方法doSomething更新状态，并renderChildren根据这些状态呈现子组件：

class MyComponent extends Component {
  constructor(props) {
    super(props);
    ...
    this.state = {
      renderChildA: true,
      renderChildB: false,
    };
  }

  doSomething = (params) => {
    // Do something...

    this.setState({ 
      renderChildA: false,
      renderChildB: true,
    });
  }

  renderChildren = () => {
    const { renderChildA, renderChildB } = this.state;
    if (renderChildA) {
      return <ChildComponentA />;
    } else if (renderChildB) {
      return <ChildComponentB />;
    }
  }

  render() {
    return (
      <div>
        {this.renderChildren()}
        ...
      </div>
    );
  }
}

注意：该组件也连接到 …

我最近开始学习 React，我正在尝试创建一个计算器作为自己的学习练习。

目的是每当我单击数字按钮时，该值就会出现在输入组件中。到目前为止，我已经让它工作了，但该值仅在第二个 onClick 事件上发生变化。

目前 val1 道具在第一次点击时从输入中消失，然后在第二次点击时重新出现，并带有前一个按钮值。

任何关于我的代码结构的提示都非常受欢迎，任何关于构建我的计算器的指导也将是很棒的。我对此还是很陌生。

这是我的代码如下：

应用程序.js

import React, {Component} from 'react';
import InputField from './Components/InputField';
import Numbers from './Components/Numbers';
import './App.css';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            number: 0,
            val1: 0,
            val2: 0
        }
    }
    numberChange(num1, num2){
        this.setState({val1: num1});
    }
    render() {
        return (
            <div className="App">
                <InputField val1={this.state.val1} value={this.state.number || ''} onChange={this.numberChange.bind(this)} />
                <Numbers onChange={this.numberChange.bind(this)} />
            </div>
        );
    }
}

export default App;

输入字段.js

import React, {Component} from 'react';

class …

当用户单击向上或向下箭头并且由于某种原因状态未更新时，我试图让 useState 工作。

即使我 setTimeout 来查看索引是否更新仍然没有。在这里完全混淆了。

import React, { useEffect, useState } from 'react';

const Wrapper = ({ children }) => {
  const [index, setIndex] = useState(-1);

  useEffect(() => {
    document.addEventListener('keydown', handler);
    return () => {
      document.removeEventListener('keydown', handler);
    };
  }, []);

  const handler = (event) => {
    if (event.key === 'ArrowDown') {
      setIndex(index + 1);
      console.log('index = ', index);
    }
  };

  return (
    <div>
      {children}
    </div>
  );
};

export default Wrapper;

I am trying to use the setState react hook and I am trying to make an object of states for different states like this

const [myState, setMyState] = useState({bulb1state: true, bulb2state: true})

then i try to change the states by doing:

setMyState({...myState, bulb1state: false})
//My state is now {bulb1state: false, bulb2state: true } 

which is normal and expected, but when i try to set the other state of the object by doing

setMyState({...myState, bulb2state: false})
//My state now becomes {bulb1state: …

我的组件是这样构建的：

function myComponent(props){
  const [state, setState] = useState("WAIT")
  function run(){
    setState("LOAD");
    props.apiFetch();
    setState("WAIT");
  }
  return(<h1 onClick={run}>{status}</h1>)
}

当我单击该元素时，state始终显示为“等待”，但从不显示为“加载”。如果有任何反馈，我将不胜感激。

编辑：将我的功能更改为

async function run(){
 await setState("LOAD")
 ...
}

没有帮助