Question

我正在尝试为div属性的数组中的每个项目创建一个this.state

但是，我得到Cannot read property 'map' of undefined这行，return outOfBudget.values.map((val, j) 关于此主题的大多数帖子都存在问题，因为数据实际上并不存在。我通过将有问题的行包装在if(outOfBudget)语句中来尝试他们的解决方案，但是错误仍然存在。我还登录outOfBudget进行控制台，并发现它确实存在。

我定义不正确吗？

const BrokeBudget = ({outOfBudget}) => {

  return outOfBudget.values.map((val, j) => {

    return (
      <div>
        <p>{val.name}</p>
        <p>{val.value}</p>
      </div>
    );
  });
};

class Budget extends React.Component {
  state = {
      remainingBudget: 1600,
      data,
      pieChartData: [],
      outOfBudget: []
  };
  handleInputChange = event => {
    let { value, id, name } = event.target;
    value = parseInt(value, 10);


    const selectedQuestions = Object.assign(
      {},
      this.state.data.selectedQuestions
    );
    if (!selectedQuestions[name]) {
      selectedQuestions[name] = {};
    }
    selectedQuestions[name][id] = value;

    let newBudget = this.state.remainingBudget - value;
    if( newBudget >= 0){
      let pieSlice =
           {
             x: name,
             y: value
           };
           console.log(pieSlice);
           this.setState({
             data: {
               ...this.state.data,
               selectedQuestions
             },
             remainingBudget: newBudget,
             pieChartData: this.state.pieChartData.concat(pieSlice),
           });
    }
    else{

      let beyondBudget = {genre: name, amount: value}
      this.setState({
        data: {
          ...this.state.data,
          selectedQuestions
        },
        remainingBudget: newBudget,
        pieChartData: this.state.pieChartData,
        outOfBudget: {...this.state.outOfBudget, beyondBudget}
      });
    }


  };

  render() {
    const { data, remainingBudget, pieChartData, outOfBudget } = this.state;
    const questions = data.questions;
    return (
      <div>
        {questions.map((q, i) =>
            <UL key={i}>
              <li>
                <h4>{q.text}</h4>
              </li>
              <li>
                <Options
                  state={this.state}
                  q={q}
                  i={i}
                  handler={this.handleInputChange}
                />
              </li>
            </UL>
          )}
        {Object.keys(data.selectedQuestions).length === 3 &&
          <div>
            <VictoryPie
              colorScale = "blue"
              data = {this.state.pieChartData}
              labels= {d => `${d.x}: ${d.y}%`}
              style={{ parent: { maxWidth: '50%' } }}
              />
              < BrokeBudget
                outOfBudget={outOfBudget}
              />
          </div>
        }
      </div>
    );
  }
}

请忽略任何奇怪的情况（例如UL我使用Emotion进行样式设置

Answer 1

什么是.values？

好像您需要return outOfBudget.map((val, j) => {而没有.values

希望这会有所帮助。

数据存在，但无法读取未定义的属性“地图”

1 个答案: