Question

这是我要尝试的操作，发现的示例似乎也没有设置该值。因此，我确信这是我所忽略的简单事物。

function calculate(){
   // USE DEFINED VARIABLES HERE
   result = one + two + three;
   return result;
}

这实际上是我开始的事情，但还是行不通：根据回答，这更接近我应该做的事情，但仍然行不通。这是什么问题？

setViewedSubmission(subId: string) {
    logger.log("pre:", this.state.position.candidates.find((c)=> {
        return c.submissionId == subId
    }).viewedSubmission) //returns original value

    this.state.position.candidates.find((c)=> {
        return c.submissionId == subId
    }).viewedSubmission = true //expect the value to update
    this.forceUpdate()

    logger.log("post:", this.state.position.candidates.find((c)=> {
        return c.submissionId == subId
    }).viewedSubmission) //returns original value still
}

Answer 1

我认为您正在反向考虑。 React基本上是一个状态机，这意味着UI反映了该状态的当前状态。

在不深入研究代码的情况下，您可能想要构造类似于以下内容的东西：

class Demo extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      viewed: false,
    }
  }
  someBusinessLogic(viewed) {
    this.setState({
      ...this.state,
      viewed: viewed,
    })
  }

  render() { 
    const { viewed } = this.state
    if (viewed ) {
     return <div>VIEWED</dive>
    } else {
     return <div>UNVIEWED</div>
    }
  }
}

...还有其他地方

...//this is terrible code, just an example of using the business logic
  <Demo viewed='true' ref={r => this.demo1 = r} />
  <Demo viewed='false'/>

  <button onClick={e => { this.demo1.someBusinessLogic('viewed') }}>Set Viewed = 'viewed'</button>
...

以这种方式构造组件意味着您可以反思状态，而不是尝试管理何时发生更新。如果状态不同，setState(newState)将重新呈现。

我的猜测是，组件的内部状态是相同的。

如果我听错了您的问题，而您没有看到传递给组件的更新，请确保您使用的是key，并且它正在更新或覆盖shouldComponentUpdate，这是forceUpdate的起点有用。

希望这会有所帮助，您可以考虑提供有关实施的更多详细信息，以便社区变得更加具体。

Answer 2

更新状态并重新渲染屏幕的唯一方法是使用setState方法。看一下：

let candidates = this.state.position.candidates;
candidates = candidates.map(candidate => {
    if(candidate.submissionId === subId) candidate.viewedSubmission = true;
    return candidate;
});
this.setState(prevState => ({
    position: {
        ...prevState.position,
        candidates
    }
}));

Answer 3

您不能直接更改状态。它是不可变的（如果您打算使用React，则应该阅读更多有关该内容的信息）。当您说package.json时，它不会更新。相反，您应该执行this.state.value = 1。而且，如果状态中有更多itens，则应执行this.setState({ value: 1 })，因为更新状态时，必须返回整个新的状态对象。

在React Native中设置状态值

3 个答案: