Reactjs 为什么不是'；子组件是否正在更新？

当我更改产品名称时，在第一个产品的情况下，我可以从App->List跟踪更改。但是列表项不会更新其道具。我认为问题在于该组件没有重新招标，但确实如此。道具没有更新，我不知道为什么

app.js

import React, { Component } from 'react';

import List from './list';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      products: [
        {
          name: 'TV',
          price: 1000,
          currency: 'USD'
        },
        {
          name: 'SSD',
          price: 100,
          currency: 'USD'
        }
      ],

      name: '',
      price: '',
      currency: ''
    };
  }

  handleChange = event => {
    console.log(`${event.target.name}: ${event.target.value}`);
    this.setState({ [event.target.name]: event.target.value });
  };

  changeState = e => {
    e.preventDefault();
    let products = [...this.state.products];
    products[0].name = this.state.name;
    products[0].price = this.state.price;
    products[0].currency = this.state.currency;

    this.setState({
      products
    });
  };

  render() {
    return (
      <div>
        <button onClick={() => console.log(this.state)}>log</button>
        <List products={this.state.products} />

        <p>{this.state.products[0].name}</p>

        <form onSubmit={this.changeState}>
          Name:
          <br />
          <input
            type="text"
            name="name"
            // defaultValue={this.state.product.name}
            onChange={this.handleChange}
          />
          <br />

          // for simplicity I'm skipping price and currency 
          // but they are there

          <input type="submit" value="Update" />
        </form>
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“./List”导入列表；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
产品：[
{
名称:"电视",，
价格：1000，
货币：美元
},
{
名称：“SSD”，
价格：100，
货币：美元
}
],
名称：“”，
价格：''，
货币：“”
};
}
handleChange=事件=>{
log（`${event.target.name}:${event.target.value}`）；
this.setState（{[event.target.name]：event.target.value}）；
};
changeState=e=>{
e、 预防默认值（）；
让products=[…this.state.products]；
产品[0]。名称=this.state.name；
产品[0]。价格=this.state.price；
产品[0]。货币=this.state.currency；
这是我的国家({
产品
});
};
render（）{
返回(
console.log（this.state）}>log
{this.state.products[0].name}

姓名：




//为了简单起见，我跳过了价格和货币
//但是他们在那里
);
}
}
导出默认应用程序；

list.js

import React, { Component } from 'react';
import ListItem from './list_item';

class List extends Component {
  constructor(props) {
    super(props);

    this.state = props;
  }

  render() {
    const productItems = this.state.products.map((product, i) => {
      console.log(product.name);
      return (
        <ListItem
          key={i}
          id={i}
          name={product.name}
          price={product.price}
          currency={product.currency}
        />
      );
    });
    return (
      <table>
        <tbody>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Price</th>
            <th>Currency</th>
            <th>Permissions</th>
          </tr>
          {productItems}
        </tbody>
      </table>
    );
  }
}

export default List;

import React，{Component}来自'React'；
从“./list_item”导入ListItem；
类列表扩展组件{
建造师（道具）{
超级（道具）；
this.state=道具；
}
render（）{
const productItems=this.state.products.map（（产品，i）=>{
console.log（产品名称）；
返回(
);
});
返回(
身份证件
名称
价格
通货
权限
{productItems}
);
}
}
导出默认列表；

list_item.js

import React, { Component } from 'react';

class ListItem extends Component {
  constructor(props) {
    super(props);

    this.state = props;
  }

  render() {
    console.log(this.state);
    console.log('rendering');
    return (
      <tr>
        <td>{this.state.id}</td>
        <td>{this.state.name}</td>
        <td>{this.state.price}</td>
        <td>{this.state.currency}</td>
      </tr>
    );
  }
}

export default ListItem;

import React，{Component}来自'React'；
类ListItem扩展组件{
建造师（道具）{
超级（道具）；
this.state=道具；
}
render（）{
console.log（this.state）；
console.log（'rendering'）；
返回(
{this.state.id}
{this.state.name}
{this.state.price}
{this.state.currency}
);
}
}
导出默认列表项；

您在

列表_item.js中遇到的问题是
this.state=props
在构造函数中。构造函数只调用一次，因此在初始化组件时定义状态，但从未更新

您实际上不需要此组件中的状态：

<tr>
        <td>{this.props.id}</td>
        <td>{this.props.name}</td>
        <td>{this.props.price}</td>
        <td>{this.props.currency}</td>
      </tr>

const ListItem = ({id, name, price, currency}) => (
  <tr>
    <td>{id}</td>
    <td>{name}</td>
    <td>{price}</td>
    <td>{currency}</td>
  </tr>
);


{this.props.id}
{this.props.name}
{this.props.price}
{this.props.currency}

因为您不需要状态，所以可以使用无状态组件：

<tr>
        <td>{this.props.id}</td>
        <td>{this.props.name}</td>
        <td>{this.props.price}</td>
        <td>{this.props.currency}</td>
      </tr>

const ListItem = ({id, name, price, currency}) => (
  <tr>
    <td>{id}</td>
    <td>{name}</td>
    <td>{price}</td>
    <td>{currency}</td>
  </tr>
);

const ListItem=（{id，name，price，currency}）=>(
{id}
{name}
{price}
{货币}
);

顺便说一下，在
list.js
中也存在同样的问题，这也可能是一个无状态组件

如果您需要从道具更新您的本地状态，您应该查看或

但是在你的情况下，你不需要这样做。
所以，如果我把它做成一个无杆组件，它应该是好的？是的，它肯定会更好。我将添加它作为示例。