标签: setstate

刚刚开始使用React,直到这一点它已经相对平稳.

我有一个包含X个预定义项的列表,这意味着列表总是以给定的行数呈现.

在列表呈现之前,此数据是从REST API收集的.数据包含与列表相关的变量,以及包含列表中每个项目的数组.

我选择了简单路由,因此我使用名为"data"的单个JSON对象填充每个组件,其中包含所有必需的内容.

呈现列表看起来像这样:

<MyList data={data} />

然后,在MyList的getInitialState中:

dataInt: this.props.data.dataInt || 0,
dataStr: this.props.data.dataStr || '',
rows: this.props.data.rows || []

所以我将我的项目数组(JSON)存储在列表的初始状态(父级)中,当我选择呈现列表时,我首先在数组中创建所有组件(子项),如下所示:

var toRender = [];
for(i = 0; i < this.state.rows.length; i++) {
    toRender.push(<ItemRow data={this.state.rows[i]} />);
}

然后我像这样渲染:

return (
    <div className="item-container">
        <table className="item-table">
            {toRender}
        </table>
    </div>
);

MyItem的渲染函数看起来像这样:

return (
    <tr>
        <td>{this.state.dataFromItem}</td>
    </tr>
);

现在,假设我想从父内部修改子数据,并从API中获取一些新数据.相同的结构,只是一个字段/列的值已更改:

i = indexOfItemToBeUpdated;
var newRows = this.state.rows;
newRows[i] = data; // New JSON object with same keys, different values.
this.setState({ rows: newRows …

背景

我们的webapp使用官方的react-redux绑定编写React和Redux.此Web应用程序中使用的另一个主要库是PaperJS.我们最近将其转换为Redux应用程序,尽管它已经使用了React一段时间.

问题

有时刷新(通常每隔一次刷新)会导致一次

RangeError: Maximum call stack size exceeded
at String.replace (<anonymous>)
at Object.unescape (KeyEscapeUtils.js:49)
at flattenSingleChildIntoContext (flattenChildren.js:32)
at flattenChildren.js:53
at traverseAllChildrenImpl (traverseAllChildren.js:69)
at traverseAllChildrenImpl (traverseAllChildren.js:85)
at traverseAllChildren (traverseAllChildren.js:157)
at flattenChildren (flattenChildren.js:52)
at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:209)
at ReactDOMComponent._updateChildren (ReactMultiChild.js:315)

这是它失败的React源代码:

return ('' + keySubstring).replace(unescapeRegex, function (match) {
  return unescaperLookup[match];
});

并在上下文中:

/**
 * Unescape and unwrap key for human-readable display
 *
 * @param {string} key to unescape.
 * @return {string} the unescaped key.
 */
function unescape(key) {
  var …

以下来自 React 教程：

const squares = this.state.squares.slice();
squares[i] = 'X';
this.setState({squares: squares});

此代码更改已复制state.squares并将其分配给 original state.squares。最后这改变了 original state.squares，所以我认为这与可变代码没有什么不同，如下所示：

this.state.squares[i] = 'X';

有什么区别吗？

我想允许用户从复选框中选择星期几。当复选框被选中时，该复选框的值应该更新 this.state.days。它不是添加到数组，而是简单地覆盖 this.state.days。尝试使用简单的展开运算符，但随后我收到一个错误，表明 react 无法将 null 转换为对象 - 当我将 days 设置为 [1,2] 时甚至会发生这种情况，因此它在开始时不是未定义的。请参阅下面的更改功能

this.state = {
    days:[]
}

handleDaySelect (event) {
    if (this.state.days) {
        var dayArr = [...this.state.days]
    } else {
        var dayArr = [];
    }
    dayArr.push(event.target.value)        
    this.setState({
        days: dayArr
    })
}

渲染功能：

render() {

    const daysOptions = ["Monday", "Tuesday", "Wednesday", "Thursday", 
    "Friday", "Saturday", "Sunday"].map((cur, ind) => {
        return (
            <div key={ind} className="checks" >
                <label>
                    <input type="checkbox" name={cur} value={cur} 
                    onChange={this.handleDaySelect} />{cur}
                </label>
            </div>
        )
    })
    return (
        <div id="newDeal" className="formContainer" …

我一直在撞墙试图让这个工作,任何建议？我正在使用这里的流量反应.我正在努力理解这段代码注释的东西,我正在同时学习.起初它是压倒性的,但在我花了一些时间在谷歌搜索任何远程关闭后,我已经走到了尽头.救命？

//@flow

import React, { Component } from 'react';
import ShowCard from './ShowCard';
import Header from './Header';

type Props = {
  shows: Array<Show>
};

type State = {
  searchTerm: " "
};

class Search extends Component<Props, State> {

  handleSearchTermChange = (Event: SyntheticKeyboardEvent<KeyboardEvent> & { currentTarget: HTMLInputElement }) => {
    //this.setState({ searchTerm: event.currentTarget.value });
    const newState = this.setState({ searchTerm: Event.currentTarget.value });
    return newState;
  };

  render() {
    return (
      <div className="search">
        <Header searchTerm={this.state.searchTerm} showSearch handleSearchTermChange={this.handleSearchTermChange} />
        <div>
          {this.props.shows
            .filter(
              show =>
                `${show.title} …

如果monthOffset = 12条件将评估为true，并将yearOffset状态更新为2017 yearOffset = 2018。根据我读过的react docs和其他答案，this.setState状态更新后，回调函数会触发，但console.log()仍会输出2018。我尝试了几种其他方法，根据其他相关问题的答案来实现此代码问题，但我的没有用。我不知道为什么。

handleClick(e) {
  const { monthOffset, yearOffset } = this.state
  this.setState({ monthOffset: monthOffset - 1 })
  if ( monthOffset - 1 === 11 ) { this.setState((prevState) => { 
    return { yearOffset: prevState.yearOffset - 1 } },
    () => {console.log("yearOffset", yearOffset)}
  )}
  console.log("clicked")
}

我正在使用 React Native TextInput 构建货币输入组件。当用户打字时，要求文本应始终采用以下格式：

$ + [integer-part] . [2 digits decimals]

因此，例如，如果用户输入2，则应自动将其格式化为$0.02. 我可以在用户键入时执行格式化，如下面的屏幕截图所示：

基本上，使用 onChangeText，我应用了一些格式，然后使用格式化的值调用 setState。

这里的问题是新输入的字符在正确格式化之前会说一秒钟。这会导致 TextInput 短暂闪烁。

我看过这个类似的问题。但不仅我无法理解接受的答案如何解决我的问题。即使我按照建议做了，它也不起作用。

我不知道如何解决这个问题：似乎 TextInput 无法完全“控制”，因为它显示了一个输入字符，尽管我已经明确说明：

value={this.state.value}

来自社区的任何帮助将不胜感激

我有一个简单的 React 类显示this.state.progress（一个数字），这个状态可以通过updateProgress(progress)函数更新。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: 0,
    }
  }

  updateProgress = (progress) => {this.setState({progress}); };
  render() {
    let {progress} = this.state;
    return <h1>{progress}</h1>;
  }
}

我有一个计算密集型函数myHeavyFunc，我需要显示进度条。我updateProgress使用内部的循环变量调用上面提到的函数myHeavyFunc。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: 0,
    }
  }

  updateProgress = (progress) => {this.setState({progress}); };
  render() {
    let {progress} = this.state;
    return <h1>{progress}</h1>;
  }
}

发生的情况是状态被更新，我可以通过控制台记录setState回调中的进度来确认这一点，但组件直到最后才会重新渲染。但是，如果我包含 1毫秒的小 …

1. 我有一系列文本字段。
2. 将新文本字段添加到数组的按钮。
3. 如果您将数据添加到文本字段并通过单击添加按钮添加新元素，则添加的数据将消失。
4. 按钮函数有一个 setstate 来查看数组中的新元素。
5. 如何将新元素添加到数组中，同时将旧数据保留在文本字段中？

开始锻炼.dart

    import 'package:flutter/material.dart';
import 'package:fultter_ultralifestyle/src/models/models.dart' show SetModel;
import 'package:fultter_ultralifestyle/src/presentation/widgets/dynamic_widget.dart';

class WorkoutStartScreen extends StatefulWidget {
  static const String routeName = "workoutStart";
  @override
  _WorkoutStartScreenState createState() => _WorkoutStartScreenState();
}

class _WorkoutStartScreenState extends State<WorkoutStartScreen> {
  final List<SetModel> sets = [
  ];

  void _addSet() {
    final id = sets.length;
    sets.add(SetModel(id: id, pounds: 0, reps: 0));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Workout tracker"),
        centerTitle: true,
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Expanded( …

我目前正在处理一个问题，我需要来自 API 的一些数据才能将其显示到我的小部件中。我遵循了一些 Provider 架构模式，在那里你 setState 两次：

1- 获取数据时

2- 当数据已经被获取时

所以我目前正在处理的问题是，我的小部件抛出以下错误：

setState() or markNeedsBuild() called during build.

我知道这个错误是因为在构建过程中调用了 setState，但是..如何在构建过程中获取我的 api，然后将它显示给我的小部件？这是我的代码：

NewsPage.dart

    class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  SideBarWidget _sidebar;

  @override
  void initState() {
    Provider.of<HomeViewModel>(context, listen: false)
        .fetchUltimaNoticia(context); --> ****Data to get fetched****
    _sidebar = const SideBarWidget();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('INICIO'),
        centerTitle: true,
        automaticallyImplyLeading: false,
        leading: Builder(
          builder: (context) => …