标签: setstate

我将名称和值从子组件传递给handleChange 函数。

现在我想将状态设置为与提供的名称匹配的值。但我不知道如何设置。

我尝试了这种方式（但它给出了错误 - 'this.setState 不是函数'）：

class ParentComponent extends Component {
constructor(props) {

    super(props);
    this.myRef = React.createRef();
    this.state = {
        loanAmount: 348600.48,
        numberOfYears: 70,
 }
  handleChange(name, value) {  
    this.setState({ name: value },() => {
      this.financeCalcualte();
    });
  }

子组件的代码为：

   onChange = (event) => {   
    const {name, rawValue} = event.target;
    this.props.handleChange(name, rawValue)
   }

设置它的正确语法是什么？

我正在创建一个文件输入来选择可以预先可视化的多个图像。

为了处理多个图像，我将它们放入组件状态的数组中，并映射预可视化图像。

但是，当我从输入中选择图像并使用 设置状态时this.setState({imgArray: newArray})，this.state.array.map(image=><img src={image}/>)不会重新渲染所选图像。

代码：

export default class posts extends Component {
  state = {
    fotos: ["/iconos/img.svg"] // If there are not img selected, it renders one image icon
  }

  onUploadVarious = e => {
    let newArray = []
    Object.values(e.target.files).map(file => {
      let nuevo = new FileReader()
      nuevo.onload = event=> newArray.push(event.target.result)
      nuevo.readAsDataURL(file)}
    )
    this.setState({fotos: newArray}) // the state is set correctly
  }
}

使成为：

<div className=" border rounded" style={{"height":"30%", "overflow":"auto"}}>
    {this.state.fotos.map(foto =>
      <img src={foto||"/iconos/img.svg"} …

我在容器内有这个按钮，如下所示：\n在此处输入图像描述

我想在单击该按钮后将该容器更改为同一容器中的文本字段，如下所示：

在此输入图像描述

所以，请 ！有什么想法可以帮忙！谢谢

Container(\n                height: 96,\n                width: MediaQuery.of(context).size.width - 24,\n                decoration: BoxDecoration(\n                    borderRadius: BorderRadius.circular(5),\n                    color: colorPrimary,\n                    border:\n                        Border.all(width: 0.5, color: Colors.redAccent)),\n                child: Padding(\n                    padding: const EdgeInsets.all(8.0),\n                    child: Row(\n                      children: <Widget>[\n                        Column(\n                          mainAxisAlignment: MainAxisAlignment.center,\n                          children: <Widget>[\n                        Column(\n                          mainAxisAlignment: MainAxisAlignment.center,\n                          children: <Widget>[\n                            InkWell(\n                              onTap: () {\n                                setState(() {});\n                              },\n                              child: Container(\n                                  height: 62,\n                                  width: 62,\n                                  decoration: BoxDecoration(\n                                      color: Colors.white,\n                                      borderRadius:\n                                          BorderRadius.circular(60),\n                                      border: Border.all(\n                                        width: 0.5,\n                                        color: Colors.grey[300],\n                                      )),\n                                  child: Icon(\n                                    Icons.phone,\n                                    size: 30,\n                                    color: Colors.purple[100],\n …

我正进入（状态

错误：超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。React 限制嵌套更新的数量以防止无限循环。

但我读到的内容应该能够在 componentDidMount 中调用 setState 而不会出现错误。

class MyComponent extends Component {
constructor(props) {
    super(props);
    this.state = {
        matchtedProducts: [],
        products: [],
    }
}
async componentDidMount() {
    try {
        const products = await getProducts()
        this.setState({ products })
    } catch(err) {
        console.log(err)
    }
}

componentDidUpdate() {
    const productColor = this.props.size.trim().toLowerCase()
    const productSize = this.props.color.trim().toLowerCase()
    const matches = []

    this.state.products.map(product => {
        const title = product.title
        const titleSpliitet = title.split(',')

        let color = titleSpliitet[1].trim().toLowerCase()
        let …

我试图从 json 获取数据，但出现一些错误，但我不知道为什么。

我收到这个错误：

E/flutter ( 4560): [ERROR:flutter/lib/ui/ui_dart_state.cc(207)] Unhandled Exception: setState() or markNeedsBuild() called during build.\nE/flutter ( 4560): This GetBuilder<GamesController> widget cannot be marked as needing to build because the framework is already in the process of building widgets.  A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building. This exception is allowed because the framework builds parent widgets before children, which means a dirty …

onPress 上的骰子图像未更改
setState未设置随机数的骰子图像

child: Image.asset('images/dice$leftDiceNumber.png')， 不工作，但
child: Image.asset('images/dice2.png')，正在工作，这意味着硬代码正在工作

var leftDiceNumber = 3; 当我为 leftDiceNumber 初始化它时只获取 dice3.png

请帮助在按下时获取随机图像

class DicePage extends StatefulWidget {
  const DicePage({Key? key}) : super(key: key);

  @override
  _DicePageState createState() => _DicePageState();
}

class _DicePageState extends State<DicePage> {
  @override
  Widget build(BuildContext context) {
    var leftDiceNumber = 3;
    return Center(
      child: Row(
        children: [
          Expanded(
            child: TextButton(
              onPressed: () {
                setState(() {   
                  leftDiceNumber = Random().nextInt(6) + 1;
                  print(leftDiceNumber); // getting value in console
                });
              },
              child: Image.asset('images/dice$leftDiceNumber.png'), …

我试图在无状态小部件中调用一个方法，但它给出了错误。

X级：

class X extends StatelessWidget { 
  const X({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Divider(height: 5,),

          ListTile(
            title: Text('X').tr(),
            leading: Container(
              height: 30,
              width: 30,
              decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.circular(5)
              ),
              child: Icon("x", size: 20, color: Colors.white),
            ),
            trailing: Icon("x", size: 20,),
         
            onTap: _openDialog(context),//This line is problematic! If I remove this line, it does not give any error.
          ),
      ],
    );
  }

   _openDialog(context) {
    return showDialog(
        barrierDismissible: true,
        context: context,
        builder: …

  const [state,setState]=useState(0)

  return(
    <>
    {state}
    <div onClick={setState(1)}></div>
    </>
  )

//Error
//Too many re-renders. React limits the number of renders to prevent an infinite loop.

该代码在我们使用时有效{onClick={()=>setState(1)}}，但我想知道为什么它在第一种情况下不起作用。

语境

我FutureBuilder在 Flutter 中遇到一个问题，它会Future在每次小部件重建时重新创建它，从而导致我的应用程序出现意外行为。

具体来说，我有一个FutureBuilder获取随机数的方法，但每次触发重建（例如，通过按下按钮更新计数器）时，它都会生成一个新的随机数，而不是使用最初获取的值。

问题

当我尝试通过按下按钮来更新计数器时，就会出现问题。每按一次不仅会更新计数器，还会重新生成 所显示的随机数FutureBuilder。我想保留第一个生成的随机数，除非明确刷新。

这是问题的视频表示：

代码

这是演示该问题的完整可运行程序：

import 'package:flutter/material.dart';

import 'dart:math'; // For generating random numbers

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'FutureBuilder Example',
      home: FutureBuilderExample(),
    );
  }
}

class FutureBuilderExample extends StatefulWidget {
  const FutureBuilderExample({super.key});

  @override
  _FutureBuilderExampleState createState() => _FutureBuilderExampleState();
}

class _FutureBuilderExampleState extends State<FutureBuilderExample> {
  int counter = 0; …

我的主要父组件中有此状态：

this.state = {
    playableCards: [],
    openedCard: null,
    offeredChips: 0,
    activePlayer: 0, // first player is 0, second player is 1
    players: [
        {
            name: "player1",
            remainingChips: 11,
            cards: [],
            score: null
        },
        {
            name: "player2",
            remainingChips: 11,
            cards: [],
            score: null
        }
    ]
};  

现在，我有一些方法可以更改状态的不同属性。例如：

takeCard = () => {
    const {
        activePlayer,
        players,
        playableCards,
        offeredChips,
        openedCard
    } = this.state;

    if(openedCard) {

        // Add card to active player
        let playersClone = [...players];
        playersClone[activePlayer].cards = [
            ...playersClone[activePlayer].cards,
            openedCard
        ];

        // …